@font-face
1.@font-face属性的使用方法
@font-face{
font-family:webFont;
src:url(‘font/字体名称.otf’)format(“opentype”);
}
ps:
- font-family属性值中使用webfont来声明使用的是服务器端字体,即设置文本的字体名称。
- src属性值中首先指定了字体文件所在的路径。
- format声明字体文件的格式,可以省略文件格式的声明,单独使用src属性值。
2.可以使用的字体文件格式
字体格式 | 字体属性 |
---|---|
otf | opentype |
ttf | truetype |
eot | embedded-opentype |
3.例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在页面上显示服务器端的字体</title>
<style>
@font-face{
font-family: webfont;
src:url(jpzk.otf);
}
h1{
font-family:webfont;
}
</style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>HELLO HTML5 CSS3</h1>
</body>
</html>