本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载
一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩,不像平面设计那样各种新花样。
但是我们在浏览一些网站时,还是可以发现一些非常酷炫和高端的字体。如小米笔记本 Air:
这里我们可以看到其使用了'F5130a'字体,但是这个酷炫的高端字体我们的电脑里面都没有,它其实就是该站点自定义设置的字体。
那么如何实现自定义字体的效果呢?答案是 CSS 的 @font-face
。
@font-face
@font-face
的语法规则如下:
@font-face {
font-family: <fontFamily>; /* 自定义的字体名称; */
src: <source> [<format>][,<source> [<format>]]*; /* 自定义的字体的存放路径、格式; */
[font-weight: <weight>]; /* 是否为粗体 */
[font-style: <style>]; /* 定义字体样式,如斜体 */
}
其取值说明如下:
了解了 @font-face
后,我们具体来实战下。首先我们可以到 dafont 随便下载一个字体,这里我们选中了下面这个字体:
解压之后,得到我们的字体文件( .ttf
和 .otf
属于不同格式的字体,下面我们再介绍)
编写代码(为了方便使用,已经把 .ttf
格式的字体重命名为 webfont.ttf
)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义字体</title>
<style type="text/css">
/* 定义字体 */
@font-face {
font-family: 'Hard Stones Sans Strip';
src: url('webfont.ttf') format('truetype');
}
.custom-font {
font-family: 'Hard Stones Sans Strip'; /* 使用 @font-face 自定义的字体 */
font-size: 80px;
}
</style>
</head>
<body>
<p class="custom-font">HEAD SCRIPT</p>
</body>
</html>
最后效果可见:自定义字体。
从上面下载的字体解压包来看,我们看到两个不同格式的字体( .ttf
和 .otf
),除此之外还有几种字体格式,大体介绍如下(可以了解下):
.svgz
。 这么多字体带来的问题是浏览器的支持:目前现代浏览器基本都支持 .ttf
、 .otf
、 .woff
的字体格式。但需要注意的是 IE8以下仅支持 .eot
格式,而 .svg
目前只有 safari 支持。具体兼容性可参看如下:
通过上面我们可以了解到若在使用 @font-face
规则时仅仅考虑一种字体格式,则可能导致在某些浏览器中无法生效。因此为了兼容不同的浏览器,我们一般会使用多个格式,如下:
@font-face {
font-family: 'myFont';
src: url('myFont.eot'); /* IE9 Compat Modes */
src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myFont.woff') format('woff'), /* Modern Browsers */
}
自定义字体平时其实使用还是非常少的,不过它还有一个应用非常广的领域——自定义图标字体(iconfont)。如下面的图标:
我们经常会在网页中使用这些图标,以前主要是通过背景图去做的,每次换个颜色或改个大小就得重新切个图,所以维护使用比较繁琐。这样图标字体就应时而生,它提供了一种解决方案:把一些简单的图标制作成字体,然后让图标变成和文字一样可以通过 CSS 去改变颜色大小等。
对于使用图片的图标来说,iconfont 图标有许多优点:
既然有这么多优点,我们也实战下。
首先我们先去Fontello这个图标字体库去选中几个图标:
然后下载下来,解压如下:
通过浏览器打开我们的 demo.html
文件就可以看到我们下载到的字体图标效果。
在正式使用之前,我们先研究下 fontello.css
的样式,代码截图大概如下:
首先是使用 @font-face
定义了字体,然后通过伪元素选择器 [class^="icon-"]:before, [class*=" icon-"]:before
使用该自定义字体,最后再根据不同的 class 设置不同伪元素的内容。
我们新建一个文件,直接引入(或拷贝)解压包中fontello.css
的字体样式,写上对应的 HTML 结构如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<link rel="stylesheet" href="css/fontello.css">
</head>
<body>
<i class="icon-search"></i>
<i class="icon-mail"></i>
</body>
</html>
最后效果可见:字体图标。
更多关于字体图标的使用可参看:为什么要用和如何使用字体图标。
PS:一般来说,用不到那么多种字体格式,可以根据实际需要兼容的浏览器来选择格式,把其余不需要的都去掉。