OStack程序员社区-中国程序员成长平台

标题: ios - IOS Safari上的自定义字体渲染 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 18:00
标题: ios - IOS Safari上的自定义字体渲染

适用于 iOS 的 Safari 无法正确呈现自定义字体。这里出了什么问题？

注意字体的渲染有多么不同:在 chrome 中，笔触宽度更粗。在 Safari 中，字符间距更宽。我觉得chrome的渲染更正确。

更新:到目前为止，我合并了答案中的建议，但没有解决问题。我已经更新了 jsfiddle 和截图。现在我不使用粗体或任何默认粗体标签，只使用正常粗细的单一字体。我采纳了@Vizllx 的建议，尽管它似乎没有帮助。

jsfiddle 上的问题示例:

http://jsfiddle.net/c9eP5/9/

@font-face{
    font-familyola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
    font-style:normal;
}
.test {
    font-size: 200%;
    font-family: Lola;
    -webkit-text-size-adjust:100%    
}

它在 Chrome 中的外观:

这是它在 iOS Safari 上的样子(“Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25")

在实际问题中，我使用常规 fontsquirrel 字体声明:

@font-face {
    font-family: 'Lola';
    src: url('../fonts/lola/lola.eot');
    src: url('../fonts/lola/lola.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lola/lola.woff') format('woff'),
         url('../fonts/lola/lola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

---

Best Answer-推荐答案

首先，您将两种字体都标记为粗体，这可能会使某些浏览器感到困惑。

但是，在包含粗体字体时我遇到了类似的问题，解决方案不是将字体设置为粗体，而是让它以不同的名称正常运行，然后使用字体名称切换粗体。 这不是 HTML 标准方式，但它有效。

http://jsfiddle.net/nothrem/ALqt8/6/

@font-face{
    font-familyola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
}
@font-face{
    font-familyola-bold;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola_bold.woff) format('woff');
}
h1 {
    font-family: Lola-bold;
}

关于ios - IOS Safari上的自定义字体渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21029745/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4