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

时间 2020-05-31

标签 css3 css 网页如何使用自定义字体栏目 CSS 繁體版

原文原文链接

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

1、总结

一句话总结：下载好字体文件，而后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用本身定义的名字来使用这个字体。

一、网页如何使用自定义字体？

下载好字体文件，而后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用本身定义的名字来使用这个字体。css

声明

 7  @font-face  8 {  9  font-family: my; 10  src: url('my.otf'); 11 }

使用

13  *{ 14  font-family: my; 15 }

二、声明网页使用字体文件在哪里声明，声明的关键词是什么？

在style里面html

@font-face

三、声明字体为了解决什么问题？

网页中的字体用户电脑没有，服务器上也没有的问题linux

如今只要网站有就能够啦css3

四、如何使用声明的字体？

声明字体的时候会指定名字，用的时候直接使用这个名字就能够了服务器

 7  @font-face  8 {  9  font-family: my; 10  src: url('my.otf'); 11 } 12 13  *{ 14  font-family: my; 15 }

2、网页如何使用自定义字体

一、相关知识

字体样式:
@font-face
{
font-family: fzm;
src: url('fzm.ttf');
}

二、代码

自定义字体类型

 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>