哪种网络字体格式的质量最高?
我发现有些网站使用 @font-face
但它们看起来令人毛骨悚然且令人毛骨悚然。没有抗锯齿,但是其他一些网站使用了一些质量非常高的字体,我不知道他们是否使用OTF或TTF或SVG或者到底是什么,这是一个示例。
我查看了他们的来源,但有大约 4 种字体类型,我不知道正在使用哪一种。
谢谢
I've seen that some websites use @font-face
but they look creepy & without anti-aliasing, But some other websites use some fonts with a very high quality, I don't know if they use OTF or TTF or SVG or what exactly, This is an example.
I've looked into their source but there is like 4 font types and i can't figure out which one is being used.
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
影响字体显示质量的因素有三个:
结论:网络字体仍然是一种黑暗而神秘的艺术。总是会有细微的差别。 查找构建良好的字体,并在目标浏览器上进行测试。我认为我们仍处于
@font-face
的试错阶段,但是 有很好的资源可以一路提供帮助。There are three factors that affect quality display of the font:
In conclusion: web fonts are still somewhat of a dark and mysterious art. Invariably, there will be minor differences. Find a well built font, and test it across your target browsers. I think we're still very much in the trial and error phase with
@font-face
, but there are good resources to help along the way.如果您想在网络上使用特殊字体,那么格式选择几乎是由浏览器为您选择的,您将需要 EOT、WOFF、TTF 和 SVG 全部可用。
像 FontSquirrel 这样的网站将提供指导以及字体文件本身。
If you want to use a special font on the web, then the format choice is pretty much made for you by the browsers, and you will need EOT, WOFF, TTF, and SVG all to be available.
A site like FontSquirrel will provide guidance as well as the font files themselves.
字体质量很大程度上取决于字体的转换方式。您可以选择删除影响抗锯齿和质量的内容,例如字距调整,以节省文件大小,许多人都这样做。外观越好,尺寸越大。影响字体的另一个因素是主机操作系统。他们的某些操作方式会影响字体的渲染方式。
另外,这只是随机的,但您可以将其放入代码中:
它将改进抗锯齿功能,尽管目前仅在 Google Chrome 中。
The font quality largely depends on how the fonts are converted. You may choose to remove things that effect anti-aliasing and quality like kerning to save file size which many people do. The better the look, the bigger the size. Another factor that goes into the fonts is the host OS. They have certain ways they do things that can affect the way fonts render.
Also, this is just kind of random, but you can throw this into your code:
It will improve anti-aliasing, albeit only in Google Chrome for the time being.
当涉及到 Windows 时,使用 @font-face 的嵌入字体在ClearType ON 下渲染得非常糟糕。
尝试这个彻底的实验:关闭ClearType 关闭,然后重新检查字体渲染。
虽然这似乎没有意义(应该发生相反的情况),但您应该发现字体现在看起来平滑自然。
这种情况发生在我身上,如果有必要我可以提供证据。相同的网页将在 Linux、Mac 等中呈现良好,而无需进行任何此类操作系统级别的修补。是的,Windows。
我仍在尝试确定解决此问题的方法,因为显然您不能要求所有使用 Windows 查看您网站的人都关闭 ClearType,以便您的字体看起来不错。
When it comes to Windows, embedded fonts using @font-face render horribly with ClearType ON.
Try this radical experiment: turn ClearType OFF, and recheck the font rendering.
While this seems to make no sense (the opposite should happen), you should find the fonts now look smooth and natural.
This happens for me and I can provide evidence if necessary. The same web page will render fine in Linux, Mac etc without doing any such OS-level tinkering. Yay Windows.
I am still trying to determine a work-around for this, because obviously you can't ask everyone looking at your website who's using Windows to turn ClearType off so your fonts will look good.
在制作网站时,我在各种浏览器上对复杂字体进行了一些实验。我发现,无论格式如何,Firefox 和 Chrome 都无法很好地呈现字体,无一例外。无论如何,IE 仅限于 eot。令人惊讶的是,Opera 做得最好。坦率地说,改变格式并没有多大区别。总的来说,我认为浏览器在渲染复杂的字体方面还有很长的路要走。
I have done some experimenting with a complex font on various browsers while making a web site. I have found that without exception, Firefox and Chrome just don't render the font well regardless of format. IE was limited to eot anyway. And surprisingly, Opera does the best job. Quite frankly, changing the format just didn't make much of a difference. Overall, I think browsers have a considerable way to go when it comes to rendering complex, intricate fonts.