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 formats

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

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

@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（'和last'）之间的所有内容视为单个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语法，对字符进行子集以减小文件大小，并使用更多选项来微调字体

此外，如果您要在文本上使用Bold或Italic，则需要包含相应更改字体粗细和字体样式的规则版本，以便浏览器知道在使用时使用哪种字体遇到一个粗体的CSS规则。

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

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

Answer 3

以下是创建可嵌入字体包的绝佳网址：

http://fontface.codeandmore.com/

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

干杯！

Answer 4

爱德华说了这一切。 Chrome曾经因为它显示某些字体的方式而让我疯狂。

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

Answer 5

Firefox Sketch Rockwell字体Bug的完美解决方案是使用css样式：

font-weight:normal !important;

字体不能在浏览器中统一呈现

5 个答案: