0%

使用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

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

20150327005358

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

20150327005550

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

20150327010127

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

应用字体

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

20150327010641

然后在样式表 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 样式,在这里我们只需要把它们去掉即可。如图所示,把改行删掉即可。 20150327011119

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