浏览器中的字体渲染问题答案

【问题标题】：Issue with font rendering in browser浏览器中的字体渲染问题
【发布时间】：2015-06-30 03:12:24
【问题描述】：

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

我尝试使用“text-rendering: optimizeLegibility”属性，但似乎没有帮助。

<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;
}

我可以做些什么来改进这种字体的呈现方式？

【问题讨论】：

可能是一个混乱的连字。
使用哪种字体？
谢谢@BoltClock，听起来和我的问题一样。现在我需要知道如何解决它。
@Oriol，它使用“HelveticaNeueW01-45Ligh”
这可能不是您想听到的解决方案，但最简单的解决方法可能是尝试使用不同的相似字体

标签： css text text-rendering html-rendering

【解决方案1】：

文本重排/连字

您已经提到您已经尝试了以下 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

两篇推荐文章：

【讨论】：