首页 > 代码库 > Web字体大揭秘

Web字体大揭秘

2024-08-20 04:21:32   226人阅读

网页中字体三个来源：

 用户机器中安装的字体（在网页中放心使用的字体）；

 保存在第三方网站上的字体。常见Typekit和Google，使用link标签链接到页面；

 保存在自己的Web服务器上的字体。使用@font-face.

Web字体设置方式：

 使用Google Web Fonts或Adobe的Typekit等公共字体库。

 使用事先打包好的@font-face包。

 使用Font Squirrel用自己的字体生成@font-face包。

Web字体通用类（给字体添加通用类是保险的方法）：

  serif：衬线字体，在每个字符笔画的末端会有一些装饰线；

  sans-serif：无衬线字体，字符笔画末端没有装饰线；

  monospace：等款字体，每个字符的宽度相等（也称代码体）；

  cursive：草书体或手写体；

  fantasy：不能归入其他类别的字体（一般都是奇形怪状的字体）。

  在页面显示字体的样式  

技术分享

 

使用上边五种字体是确保在最坏的情况下，文档代码可以以正确的字形显示。

1.公共字体库

1.1使用Google Web Fonts 

打开http://www.google.com/webfonts，找到想要的字体，单击Add to Collection按钮，点击Use按钮，即可生成选定字体的链接。

 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Anton|Niconne|Prata"/>
<style>
   body{font-size:20px;font-family:Anton,serif;}
</style>
</head>
<body>
  <div>link - Google 字体</div>
</body>

 

技术分享

 

2.打包的@font-face包

@font-face是CSS2的语法，允许在网页上显示自定义字体。所有浏览器都可以使用。

2.1使用规则

 

可以从网上或者第三方Web服务器下载到字体。这种方式在浏览器第一次加载时，会被缓存下来，之后就不用下载。

 

2.2语法

 

@font-face{
  font-family: 字体名称；
  src:url(路径)
        format("格式")，
        url(路径)
        format("格式")，
        ...;
   font-weight:normal;
   font-style:normal;
}

2.3@font-face兼容

     不同浏览器要求的字体格式不同。如:

     a.Webkit/Safari(3.2+):TrueType/OpenType  TT(.ttf) 、OpenType PS(.otf)。

     b.Opera(10+):TrueType/OpenType  TT(.ttf) 、OpenType PS(.otf)、SVG(.svg)。

     c.IE4开始使用EOT(EmbeddedOpenType)；IE9使用WOFF。

     d.Firefox(3.5+):TrueType/OpenType TT(.tff)、OpenType PS(.otf)、WOFF(since Firefox 3.6)。

      f.Google Chrome:TrueType/OpenType TT(.ttf)、OpenType PS(.otf)、WOFF since version 6。

      g.iOS4.1之前版本中移动Safari以及其他浏览器使用SVG格式，iOS4.1之后的移动Safari使用OTF(OpenType)或TTF(TrueType)字体。

     由a~g可以得出：.eot + .ttf / .otf + svg + woff = 所有浏览器都完美支持

     Font Squirrel(http://www.fontsquirrel.com)提供了很多字体包。每个字体包中都含所有格式的字体和为每款浏览器提供正确格式的CSS代码。

2.4生成@font-face包

   首先获取转换Web字体使用授权，使用Font Squirrel还有一个转换程序，可以把上传的字体转成字体包。

Web字体大揭秘


联系
我们