html - CSS 中的@font-face 问题

Question

我在呈现@font-face CSS 和 HTML 时确实遇到了一些问题。有趣的是字体似乎正在加载，但它们在页面上看起来很模糊，然后在 Safari 中它们比其他浏览器要暗得多。我对事情的结果感到非常失望!

我选择实现的方法是从 CSS Tricks 网站 (http://css-tricks.com/snippets/css/using-font-face/) 获得的，这是一个很好的资源。它仍然无法正常工作，而且我使用任何其他浏览器查看任何其他网站都没有问题。

我已经检查了我的 Windows 7 中的 Cleartype 字体，它可以正常工作。我假设我的标题 CSS 很好，因为字体正在渲染，所以我希望这是一个语法问题或一些简单的问题。也许这也是我使用 HTML 5 的原因？

这是我的测试域中的页面:http://www.richmindonline.com/sampleconversion2.html

我在此处发布代码时遇到了问题。没有 CSS 文件，样式是内部和内联的。

Answer 1

您使用的字体太细了。此外，不同的浏览器将呈现不同的 HTML。一些较旧的计算机甚至不进行抗锯齿处理。顺便说一句，该链接中的文本没有启用抗锯齿功能，实际上让我读起来感觉很奇怪。

使用@font-face时需要注意的事项:

1. 许多不同的字体可能看起来不错，但下载页面需要更长的时间，因为还必须呈现字体。
2. 旧版浏览器不支持 @font-face(尤其要注意 IE)。
3. 设计排版时要牢记字体和大小，以防 font-face 失败。

根据经验，我总是选择一种标准字体。他们还不错。