在浏览器中无法一致呈现的字体 [英] Fonts not rendering uniformly in browsers

问题描述

我想在我的网站上使用自定义字体，在css我有以下代码：

I am trying to use custom fonts on my website and in the css I have the following code:

@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中（我应该删除在我的侧边栏中使用字体的想法，并使用将显示平滑文本的图像）; - /）

The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)

在IE中，字体根本不显示。

In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?

推荐答案

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

Different browsers supports different font formats:

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

So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).

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

And then, you can import them like that:

@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的博客中找到有关此问题的更完整的信息

That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.

而且，不同浏览器的外观可能有所不同。

And, anyway, their appearance may differ a little in different browsers.

这篇关于在浏览器中无法一致呈现的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！