1

我正在尝试在我的网站上使用自定义字体，在 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 中工作？

4

4 回答 4

8

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

字体格式

所以你需要创建所有格式的字体。您可以使用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 的博客上找到有关此问题的更完整信息。

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

于 2012-08-11T14:02:31.553 回答
4

所有主要浏览器的字体渲染引擎/技术都略有不同，并且渲染输出的质量也不同。因此，您的字体在各种浏览器之间不太可能是“像素完美”的，并且会出现一些质量差异。哪个最终看起来最好取决于字体。我有一个字形字体，在 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 Kit Generator，可在http://www.fontsquirrel.com/fontface/generator 访问。在那里，您可以上传您的字体并将其转换为您希望的任何格式。您还可以控制它输出的 CSS 语法，对字符进行子集化以减小文件大小，并使用更多选项来微调字体

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

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

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

于 2012-08-11T14:16:08.160 回答
2

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

http://fontface.codeandmore.com/

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

干杯!

于 2012-08-11T14:05:23.770 回答
1

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

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

于 2012-08-11T14:09:50.570 回答