字体渲染 Safari 6答案

【问题标题】：Font render safari 6字体渲染 Safari 6
【发布时间】：2013-04-03 21:06:18
【问题描述】：

我在this site 上使用 DINNextLTPro-Medium 字体，注意到 Safari 6 和 Chrome (mac) 与世界其他地方（Safari 5 mac/win、Chrome win、Firefox win、歌剧胜利...）。

这是在装有 Safari 6 的 Mac 上发生的情况：

在 Safari 5 上获胜：

这是我的 css 文件中的字体调用：

@import url("//hello.myfonts.net/count/259bc7");
@font-face {
    font-family: 'DINNextLTPro-Medium';
    src:    url('fonts/259BC7_0_0.eot');
    src:    url('fonts/259BC7_0_0.eot?#iefix') format('embedded-opentype'),
            url('fonts/259BC7_0_0.woff') format('woff'),
            url('fonts/259BC7_0_0.ttf') format('truetype')
}

body,input,button,textarea  {
    font-family: DINNextLTPro-Medium, Helvetica, Arial, sans-serif; border:none;
    font-size: 16px; line-height: 24px;
    font-weight: normal;
    font-style: normal; }

这一切都来自 myfonts，它与我习惯的 fontsquirrel 声明非常相似，它以工作得很好而闻名。

问题是，有人对此有所了解吗？我知道很难在不同的浏览器上获得相同的渲染，但在这里，它看起来非常大胆。

编辑 #1：会不会是由于从 Vimeo (flash) 加载的视频造成的？

【问题讨论】：

您在 Windows 版 Safari 中使用了哪些字体平滑设置？

标签： fonts macos

【解决方案1】：

您的@font-face 看起来不错，看不出它在版本 5 中不显示的任何原因。但是，通过谷歌搜索自定义字体 Safari 5 很快就会发现很多人在此版本的 Safari 上遇到了渲染问题。

奇怪的是，很多人报告此问题是由 Adobe Flash 引起的，而一种复制方法来查看是否是问题所在，即字体在页面加载之前是否快速呈现？由于人们仅在页面完全加载后才报告它，因此页面上的快速刷新应该能够复制以查看这是否是问题。

结帐：https://discussions.apple.com/thread/2458648?start=0&tstart=0

【讨论】：

实际上它只发生在 safari 6 上，5 很好。是的，我没有写它，但是当我从 vimeo 加载几个 iframe 以显示视频时，我认为 flash 可能是问题的根源之一。
我不熟悉 safari 但我认为它有某种萤火虫？我会在几个小时后为你看看，你是否 100% 确定它正确执行了字体而不是使用后备字体？
是的，Din 字体本身加载正常。后备是 Helvetica，两者之间有明显的区别。我的问题是我没有带 safari 6 的 mac（只是我的客户）。已经和财产检查员一起在他的笔记本电脑上看了一眼，一切都很好。

【解决方案2】：

根据我的经验，我使用的是 Safari 6 + iMac & IE 10 + Windows 7，这主要是由于 Mac 和 Windows 使用的不同字体渲染技术造成的。我不确定您是否曾经使用过 Mac，或者是否注意到 Mac 和 Windows 之间的不同字体渲染。 Mac 中的字符看起来更平滑且有点模糊，而在 Windows 中它们看起来很清晰。

除此之外，您可以尝试在 Windows 中调整 ClearType（控制面板/外观和个性化/显示/调整 ClearType 文本）和在 Mac 中调整字体平滑（设置/常规）。您也可以使用终端来调整字体的渲染程度。

defaults -currentHost write -globalDomain AppleFontSmoothing -int 2

-int 1 比 -int 2 轻

有关差异的更多信息，请阅读此~article~

【讨论】：

【解决方案3】：

经过多次搜索，我似乎通过 css 找到了解决方法：

html {-webkit-font-smoothing: antialiased}

【讨论】：