css3-11 网页如何使用自定义字体
一、总结
一句话总结：下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。
1、网页如何使用自定义字体？
下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。
声明
7 @font-face
8 {
9 font-family: my;
10 src: url('my.otf');
11 }
使用
13 *{
14 font-family: my;
15 }
2、声明网页使用字体文件在哪里声明，声明的关键词是什么？
在style里面
@font-face
3、声明字体为了解决什么问题？
网页中的字体用户电脑没有，服务器上也没有的问题
现在只要网站有就可以啦
4、如何使用声明的字体？
声明字体的时候会指定名字，用的时候直接使用这个名字就可以了
7 @font-face
8 {
9 font-family: my;
10 src: url('my.otf');
11 }
12
13 *{
14 font-family: my;
15 }
二、网页如何使用自定义字体
1、相关知识
字体样式:
@font-face
{
font-family: fzm;
src: url('fzm.ttf');
}
@font-face
{
font-family: fzm;
src: url('fzm.ttf');
}
2、代码
自定义字体类型
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 @font-face 8 { 9 font-family: my; 10 src: url('my.otf'); 11 } 12 13 *{ 14 font-family: my; 15 } 16 17 div{ 18 width:500px; 19 height:300px; 20 } 21 22 </style> 23 </head> 24 <body> 25 <div> 26 <p>我是小金，我爱睡觉!</p> 27 <p>linux is very much!</p> 28 <p>linux is very much!</p> 29 <p>linux is very much!</p> 30 <p>linux is very much!</p> 31 </div> 32 </body> 33 </html>