关于web中的字体, .woff, .eot, .svg

2024年1月16日 164次阅读 来源: 星辉Johnson

一般情况下引用字体@font-face时，会把woff，eot，svg都引用进去，浏览器根据需要下载不同类型的字体。

IE–.eot;    其它浏览器–.woff；    手机浏览器一般是–.ttf;

truetype:
是windows和mac系统最常用的字体格式。

eot:
eot是嵌入式字体，是微软开发的技术，允许onetype字体用@font-face嵌入到网页。

onetype:
onetype是微软和Adobe共同开发的字体，IE浏览器全部采用这种字体。

woff:
woff(web开发字体格式)是一种专门为web而设计的字体格式标准，实际上是对truetype/onetype等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

svg:
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

如何使用：

IE只支持微软自有的EOT格式字体，需要用字体转换工具将其转换为EOT格式，其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体。

 

<span class="logo"></span>

 

 

  1. @font-face {

  2. font-family: 'MyWebFont';

  3. src: url('webfont.eot'); /* IE9 Compat Modes */

  4. src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  5. url('webfont.woff2') format('woff2'), /* Super Modern Browsers */

  6. url('webfont.woff') format('woff'), /* Pretty Modern Browsers */

  7. url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */

  8. url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

  9. }

  10.  

  11. #logo{

  12. font-family:

  13. 'MyWebFont', 'PingFang SC',

  14. 'Helvetica Neue','Helvetica',

  15. 'STHeitiSC-Light',"Microsoft YaHei", 'Arial', sans-serif;

  16. font-size: 60px;

  17. }

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。
并始终提供一个类族名称作为最后的选择。

通常字体系列名称：比如：”serif”(无衬线)、”sans-serif”(衬线)、”cursive”(等宽)、”fantasy”(梦幻)、”monospace”(草体)；

具体DEMO案例，这篇文章比较全。http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html

 

注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

 

网页常用的字体：
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常。

 

中文：
宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。

 

字体引用的优先级

ios：中文：PingFang 苹方，STHeitiSC-Light 苹果黑体；英文：优先Gotham,Myriad Set Pro;STHeitiSC-Light 苹果黑体；

windows：yahei 微软雅黑

font-family:’PingFang SC’,’Gotham’,’Myriad Set Pro’ ,’STHeitiSC-Light’, ‘Microsoft YaHei’, sans-serifsans-serif;

    原文作者：星辉Johnson
    原文地址: https://blog.csdn.net/qq_18145031/article/details/82791895
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞