字体在浏览器中呈现不均匀

Question

我正在尝试在我的网站和 css 中使用自定义字体，我有以下代码：

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/Sketch.eot');
    src: url('../fonts/Sketch.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
ul#holder {font-family:'Sketch'}

字体确实在 Firefox 中出现。在 chrome 中，字体似乎没有平滑渲染，并且看起来不如 firefox（我应该放弃在侧边栏中使用字体的想法并使用显示平滑文本的图像吗？;-/）

在 IE 中，字体根本不显示。应该怎么做才能在 Chrome 中正确平滑这些字体并让它们在 IE 中正常工作？

Answer 1

不同的浏览器支持不同的字体格式：

因此，您需要创建所有格式的字体。您可以使用Font Squirrel（谢谢，effectica）。

然后，您可以像这样导入它们：

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

这不是唯一可能的方法。您可以在 Paul Irish 的博客上找到有关此问题的 more complete information。

而且，无论如何，它们的外观在不同的浏览器中可能会略有不同。

Answer 2

所有主要浏览器的字体渲染引擎/技术略有不同，渲染输出质量也不同。因此，您的字体在各种浏览器之间不太可能是“像素完美”的，并且会出现一些质量差异。哪个最终看起来最好取决于字体。我有一个字形字体，在 Chrome 和 IE 上看起来很棒，但在 Firefox 上看起来有点褪色......

无论如何，有一个小技巧可以帮助您让字体在 IE 上工作，请参阅第二个 src 行。这是必要的，因为虽然添加额外的字体格式可以确保对每个浏览器的支持，但不幸的是它会导致 IE9 之前的 IE 版本出现问题。那些较旧的浏览器将第一个 url(' 和最后一个 ') 之间的所有内容视为单个 URL 请求，因此将无法加载字体。这个 hack 让浏览器认为 src 属性的其余部分是该查询字符串的参数，因此它会寻找正确的 URL 并加载字体：

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/SketchRockwell.eot');
    src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SketchRockwell.woff') format('woff'),
         url('../fonts/SketchRockwell.ttf') format('truetype'),
         url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

以上内容来自 Font Squirrel 的 @font-face 工具包生成器，可通过 http://www.fontsquirrel.com/fontface/generator 访问。在那里，您可以上传您的字体并将其转换为您希望的任何格式。您还可以控制它输出的 CSS 语法，对字符进行子集化以减小文件大小，并使用更多选项来微调字体

此外，如果您要在文本上使用粗体或斜体，那么您需要包含相应更改每个组合的字体粗细和字体样式的规则版本，以便浏览器知道在使用什么字体时遇到带有粗体的 CSS 规则。

每种字体通常都有一个设计目的，并且是为特定的工作而创建的。大多数商业字体并非设计用于在屏幕上以小尺寸查看，因此在许多情况下，将这些 @font-face 保留为标题并继续使用网络安全字体（如 Georgia 和 Lucida）作为正文是最有意义的。

字体的另一个影响易读性的方面是它们是如何消除锯齿和提示的。现在，网络字体的边缘通常比传统字体更锯齿，即使在抗锯齿的情况下也是如此，通常是因为大多数字体不是为在屏幕上查看而设计的。更高质量的字体，以及为网络设计的字体，具有更好的提示，

Answer 3

这是创建可嵌入字体包的绝佳 URL：

http://fontface.codeandmore.com/

上传您的 TTF 或 OTF 字体，它会为您创建完整的字体套件，包括 实现 HTML 和 CSS 示例。

干杯！

Answer 4

爱德华都说了。 Chrome 曾经因为它显示某些字体的方式让我发疯。

如果您有字体文件，您可以使用font squirrel 生成代码以及所有浏览器所需的所有字体文件。