Question

结果样本： font rendering issue sample

你可以看到两个字母＆＃34; f＆＃34;和＆＃34; l＆＃34;在每个浏览器和我的styles.css都是大胆的。它没有任何规则。我不确定，但认为这是字体渲染的问题（＆＃34; HelveticaNeueW01-45Ligh，Helvetica Neue，Helvetica，sans-serif＆＃34;）。

我尝试使用＆＃34; text-rendering：optimizeLegibility＆＃34;财产，但它似乎没有帮助。

<p style="text-rendering: optimizelegibility;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the&nbsp;blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language&nbsp;ocean. A small river named Duden ﬂows. Separated they live in Bookmarksgrove right at the coast of&nbsp;the Semantics.</p>

和样式：

element {
    text-rendering: optimizelegibility;
}
body.home .entry-content p {
    margin: 20px 0px;
    font-family: "HelveticaNeueW01-45Ligh",Helvetica Neue,Helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.9em;
}
body.home .entry-content p {
    margin: 20px 0px;
    font-family: "HelveticaNeueW01-45Ligh",Helvetica Neue,Helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.9em;
}
body.page-template-default .entry-content p {
    font-size: 1.6em;
    line-height: 1.5;
    margin-bottom: 15px;
}
.entry-content p {
    font-size: 1.6em;
    line-height: 1.7;
}
.entry-content p {
    margin: 0px 0px 15px;
    font-size: 1.6em;
    line-height: 1.7;
}
p {
    margin-bottom: 1.5em;
}
body, button, input, select, textarea {
    color: #404040;
    font-family: "HelveticaNeueW01-55Roma",Helvetica Neue,Helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
}

如何改善此字体的呈现方式？

Answer 1

text-redering / ligatures

您已经提到过您已尝试过以下css属性。

text-rendering: optimizeLegibility;

您可以从文章"Make Your Web Pages More Legible With Ligatures"中了解更多内容：

“要打开标准连字，请使用：”

     p { font-variant-ligatures: common-ligatures; }

“在所有浏览器中获得支持，同时使用文本呈现：optimizeLegibility作为后备”：

p {
    /* optional: for older browsers */
    text-rendering: optimizeLegibility; 

     /* for iOS and Safari 6 */
    -webkit-font-variant-ligatures: common-ligatures;

    /* for up-to-date browsers, including IE10 and Opera 21 */ 
    font-variant-ligatures: common-ligatures; 
}

字体平滑

改善字体外观的另一种方法：

-webkit-font-smoothing: antialiased; // chrome - safari
-moz-osx-font-smoothing: grayscale; // mozilla

两篇推荐文章：

浏览器

1 个答案:

text-redering / ligatures

字体平滑