有时候由于业务需要,或者是使页面美观,我们需要在网页中使用一些第三方的字体。
对于小面积变动不大的文字区域,我们通常都会采用图片的方式来解决。
但是对于文本内容经常改变,或者在网页中使用面积较大的情况来说,再采用图片的方式显然不是一种明智的选择。
这时候我们可以使用自定义字体来解决这个问题。
@font-face属性允许用户在页面中使用自定义字体,示例代码如下:
/*声明*/
@font-face{
font-family: 'MyFont';
src: url('./my-font.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
/*引用*/
.cool-text{
font-family: 'MyFont';
}
上述代码的意思是:
- 告诉浏览器,我们使用了@font-face代码块声明一种自定义字体,字体名为MyFont。
- MyFont的字体源文件是当前目录下的my-font.ttf,字体源文件使用truetype(不能写ttf)格式去解析,将字体宽度默认设为600、风格设为常规。
- 然后哪里的font-family样式如果引用了MyFont,就以这种字体来显示。
属性值
在@font-face代码块中,font-family属性和src属性是必须的。
其中:
font-family属性指定自定义字体的名称,值是一个字符串。
src属性指定自定义字体的源,url里指定是数据源,format里指定的是数据格式,下述的写法也是可以的:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot') format('eot'); /*IE*/
src: url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype'); /*non-IE*/
}
需要注意的几点
@font-face代码块不能写在样式块里,比如下面的代码是不生效的:
.some-class{
@font-face{
font-family: 'MyFont';
src: url('./my-font.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
}
.ttf字体对应的format()格式是truetype,不是ttf。