【问题标题】:Thin font not showing correctly on windows细字体无法在 Windows 上正确显示
【发布时间】:2013-07-19 02:45:39
【问题描述】:

我正在尝试在我的网站上使用“HelveticaNeueLTStd25UltraLight”。在 OSX 上,它在每个浏览器中看起来都很完美。在 Windows 上,这太可怕了:

铬:

IE:

我正在使用以下 CSS(如果重要的话):

    @font-face {
    font-family: 'HelveticaNeueLTStd25UltraLight';
    src: url('../fonts/HelveticaNeueLTStd25UltraLight.ttf');
}


body{font-family:'HelveticaNeueLTStd25UltraLight'; font-weight:normal;}

/*** IE FONT ***/
@font-face {font-family: 'HelveticaNeueLTStd25UltraLight';
    src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot');
    src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot') format('embedded-opentype'),
         url('../fonts/HelveticaNeueLTStd25UltraLight.woff') format('woff'),
         url('../fonts/HelveticaNeueLTStd25UltraLight.ttf') format('truetype'),
         url('../fonts/HelveticaNeueLTStd25UltraLight.svg#HelveticaNeueLTStd25UltraLight') format('svg');
    font-weight: normal;
    font-style: normal;}

有人可以解释这是为什么吗?我能做些什么呢?如果我必须使用另一种字体,哪些字体可以安全使用?

【问题讨论】:

  • 你需要使用抗锯齿数据更好的字体。

标签: html css windows google-chrome font-face


【解决方案1】:

每个浏览器使用不同的方法以不同的方式呈现字体,这就是为什么要包含这么多不同版本的字体,因为每个版本都由不同的浏览器使用。 OSX 拥有最好的字体渲染引擎之一,看起来很棒,但在 IE、FF 或 Chrome 中查看,情况往往会有所不同。除了尝试粗一点的字体之外,您无能为力。

你可以看看font-weight: 500是否有帮助。

【讨论】:

    【解决方案2】:

    Windows 在浏览器中的字体渲染比 OSX 或 iOS 更糟糕。有时您可以通过选择浏览器抗锯齿看起来不太糟糕的特定字体大小来修复它。还有 text-rendering: optimizeLegibility CSS 属性,但根据我的经验,它通常弊大于利。

    选择一种更适合网络显示的不同字体。 Google Web Fonts 是一个很好的起点。他们有很多很棒的现代字体,这些字体都经过优化以用作网络字体,最重要的是,它们提供了 CSS 等 - 你只需要在你的 <head> 中将 <link> 到他们的外部 CDN CSS 文件中,然后 bam 你重新出发。 “Lato”和“Raleway”是我有时用来代替 Helvetica Neue 的字体。

    此外,由于 Helvetica Neue LT Std 是商业字体,因此嵌入该字体几乎可以肯定是非法的,所以...

    【讨论】:

    • 谢谢!看起来我无论如何都需要使用不同的字体,我什至不记得我从哪里得到的字体,如果它是商业的。我会检查你建议的 2 种字体。
    • 没问题。 Helvetica 和 Helvetica Neue 在设计界非常流行,所以这不是一个闻所未闻的问题!如果你用谷歌搜索“Helvetica Neue webfont Alternatives”,你会发现很多建议。感谢您将此标记为答案:)
    • 对于其他寻找替代方案的人:我最终选择了来自 Google Web Fonts 的 Roboto 100。非常好,但在 Windows 上看起来仍然好多了。
    猜你喜欢
    • 2019-06-06
    • 2016-12-15
    • 2013-11-26
    • 2012-05-25
    • 2013-05-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-08
    相关资源
    最近更新 更多