微信扫一扫打赏支持

css3-11 网页如何使用自定义字体

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');
}

 

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>

 

 

 
posted @ 2018-07-04 13:36  范仁义  阅读(669)  评论(0)  编辑  收藏  举报