综述
CSS3 已经变得非常流行,原本的 CSS 不支持自定义字体,但是传说中的 CSS3 基本上什么都可以,那么 CSS3 中可不可以自定义英文字体呢?这里我们就一起来感受一下。
语法规则
1 |
@font-face { |
取值说明
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 |
@font-face { |
获取字体
在这里介绍一个网站,叫做 fontsquirrel
在这里,你可以通过上传你的字体,来获取上面四种格式的字体文件。
我们点击按钮 UPLOAD FONTS,选择本地的字体文件,然后网站就会为我们生成上述格式的字体文件,勾选 Agreement,然后直接点击下载即可,DOWNLOAD YOUR KIT。
比如我上传的字体名叫做 FuturaICG-Light,那么下载之后的文件目录就如下
其中,这个目录下给我们生成了一个 demo,可以用浏览器打开 html 后缀的文件,预览一下 demo 是怎么写的。
应用字体
如果我们要用,就把五个字体文件复制一下,复制到项目目录里。
然后在样式表 css 中加入如下代码即可生效啦,这个代码在 demo 的 stylesheet 文件中,我们直接复制即可,比如我的便是
1 |
@font-face { |
在这里要注意路径问题,如果 css 在字体的上级目录,那么就要在前面加上字体文件夹的名称,我想大家都能理解。 刷新一下页面,我们可以发现页面的字体效果就已经生效啦。 如果有不生效的地方,很可能是 CSS 表中设置了 html 或者 body 的 font-family 样式,在这里我们只需要把它们去掉即可。如图所示,把改行删掉即可。
这时,如果还不行,请检查路径设置。 以上就是我们用 CSS3 来自定义网页字体的方法,希望对大家有帮助。