使用 CSS3 自定义网页字体的方法

综述

CSS3 已经变得非常流行，原本的 CSS 不支持自定义字体，但是传说中的 CSS3 基本上什么都可以，那么 CSS3 中可不可以自定义英文字体呢？这里我们就一起来感受一下。

语法规则

1
2
3
4
5
6
7
8
9
10
11

@font-face {

　　font-family: 自定义的字体名称;

　　src: 自定义的字体的存放路径;

　　font-weight: normal;是否为粗体

　　font-style: normal;定义字体样式，如斜体

}

取值说明

font-famliy

此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的 Web 元素中的 font-family。如 “font-family:”YourWebFontName”;”

source

此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

format

此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg 等

weight 和 style

这两个值大家一定很熟悉，weight 定义字体是否为粗体，style 主要定义字体样式，如斜体

各个浏览器需要字体的格式

TureTpe(.ttf)

.ttf 字体是 Windows 和 Mac 的最常见的字体，是一种 RAW 格式，因此他不为网站优化，支持这种字体的浏览器有 IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

OpenType(.otf)

.otf 字体被认为是一种原始的字体格式，其内置在 TureType 的基础上，所以也提供了更多的功能，支持这种字体的浏览器有 Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

Web Open Font Format(.woff)

.woff 字体是 Web 字体中最佳格式，他是一个开放的 TrueType/OpenType 的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有 IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

Embedded Open Type(.eot)

.eot 字体是 IE 专用字体，可以从 TrueType 创建此格式字体，支持这种字体的浏览器有 IE4+

SVG(.svg)

.svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+ 所以，@font-face 中我们至少需要.woff,.eot 两种格式字体，甚至还需要.svg 等字体达到更多种浏览版本的支持。

综合写法

1
2
3
4
5
6
7
8
9
10
11
12
13

 @font-face {
    font-family: 'YourWebFontName';
    /* IE9 Compat Modes */
    src: url('YourWebFontName.eot');
    /* IE6-IE8 */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), 
        /* Modern Browsers */
        url('YourWebFontName.woff') format('woff'), 
        /* Safari, Android, iOS */
        url('YourWebFontName.ttf')  format('truetype'), 
        /* Legacy iOS */
        url('YourWebFontName.svg#YourWebFontName') format('svg'); 
}

获取字体

在这里介绍一个网站，叫做 fontsquirrel

在这里，你可以通过上传你的字体，来获取上面四种格式的字体文件。

我们点击按钮 UPLOAD FONTS，选择本地的字体文件，然后网站就会为我们生成上述格式的字体文件，勾选 Agreement，然后直接点击下载即可，DOWNLOAD YOUR KIT。

比如我上传的字体名叫做 FuturaICG-Light，那么下载之后的文件目录就如下

其中，这个目录下给我们生成了一个 demo，可以用浏览器打开 html 后缀的文件，预览一下 demo 是怎么写的。

应用字体

如果我们要用，就把五个字体文件复制一下，复制到项目目录里。

然后在样式表 css 中加入如下代码即可生效啦，这个代码在 demo 的 stylesheet 文件中，我们直接复制即可，比如我的便是

1
2
3
4
5
6
7
8
9
10
11

@font-face {
 font-family: 'futuraicg_lightregular';
 src: url('FuturaICG-Light-webfont.eot');
 src: url('FuturaICG-Light-webfont.eot?#iefix') format('embedded-opentype'),
 url('FuturaICG-Light-webfont.woff2') format('woff2'),
 url('FuturaICG-Light-webfont.woff') format('woff'),
 url('FuturaICG-Light-webfont.ttf') format('truetype'),
 url('FuturaICG-Light-webfont.svg#futuraicg_lightregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

在这里要注意路径问题，如果 css 在字体的上级目录，那么就要在前面加上字体文件夹的名称，我想大家都能理解。 刷新一下页面，我们可以发现页面的字体效果就已经生效啦。 如果有不生效的地方，很可能是 CSS 表中设置了 html 或者 body 的 font-family 样式，在这里我们只需要把它们去掉即可。如图所示，把改行删掉即可。

这时，如果还不行，请检查路径设置。 以上就是我们用 CSS3 来自定义网页字体的方法，希望对大家有帮助。

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/1491.html