Question

我对一个问题很生气，我想知道是否有人可以提供帮助。我目前正在使用http://font-combinator.com来查看不同风格的字体在一起的样子。该网站只是从Google字体中加载字体并在屏幕上显示。

现在我选择一种字体，认为它看起来不错，然后转到谷歌并下载它。然后我将该字体粘贴到我的本地字体目录中，这样我就能看到它在本地看起来像什么，并在我的css中添加它的名字，如下所示：

font: 100%/1.6 "Font name here"; 
color: #bbb;
font-weight: 400; (for example)

问题是当我在与Font Combinator相同的浏览器中查看它时，它看起来更粗糙，更加锯齿状。没有更改任何设置。两个网站上的字体均为16像素。作为参考，我使用关闭了cleartype的Windows XP（我不喜欢它）。

现在如果我通过我的网站直接链接到谷歌字体，那么它显示与字体组合器相同。我不明白安装Google使用的相同字体会产生不同的结果吗？理想情况下，我想自己在我的网站上托管字体，但是看不到这个方法呢？我做错了什么，还是我错过了什么？谢谢！

作为参考，我使用以下重置：

html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}

编辑：我使用的@Fontface代码，看起来看起来一样！

@font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf') 
format('truetype');
}

（仅选择此字体作为示例）

Answer 1

这可能与this question重复，但这是我对此的回答：

根据以下内容呈现不同的字体：

屏幕/显示器分辨率
浏览器
操作系统
使用和提示的大小

在没有看到您的代码的情况下，我唯一可以推荐的是：

确保使用正确的重置css（类似这样的内容：http://meyerweb.com/eric/tools/css/reset/）。
尝试将font-weight: normal;添加到字体中，看看这是否有所不同;有时浏览器和框架会尝试在事物中添加假的粗体。
确保您使用的是字体的实际版本而不只是应用CSS样式。
如果所有其他方法都失败了，请尝试向上/向下调整字体大小一小部分，看看这些字体的字体是否更好。

有些人还建议不要使用谷歌的@import或直接链接。也许尝试下载文件并在你的CSS中使用@ font-face。希望这有帮助！

修改如果您自己托管字体 - 请仔细检查@ font-face调用。确保您可以调用所有版本的字体。另外，Some browsers prefer certain formats being called earlier.

Answer 2

我有同样的问题而且很乱，很难解决。主要问题是你下载的字体实际上不是＆＃34;相同＆＃34;谷歌webfonts提供。字体系列是相同的，但Google可以提供不同的格式。您在系统上安装的字体可能是.ttf文件，它是一种truetype字体，Windows可以使用它。但是，如果您在使用字体时查看Google为您提供服务的CSS，则可能是这样的：

为此：

http://fonts.googleapis.com/css?family=Open+Sans

你明白了：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

正如您所看到的，如果没有本地匹配，它会以woff格式请求字体BUT，它是相同的字体，但是采用另一种字体格式。事实上，我已经使用chrome完成了这个示例，但谷歌提供的css选择了最佳的字体格式，具体取决于发出请求的浏览器和SO。

这就是为什么你看到相同的字体系列渲染如此不同的原因，本地的一个是.ttf，另一个可能是woff，svg（我认为是IE），还有其他的可能性。不同格式的相同字体看起来不同，有时候太多不同。

我认为最好的选择是自己创建css，而不是将其发送到Google，并删除本地部分，但添加其他格式非常重要，否则它将无法支持所有格式浏览器。

Google的安装字体看起来与通过API获得的字体不同？

2 个答案: