3.2-7 字体属性详解_阿里巴巴普惠体 fontfamily-优快云博客

本文链接：https://blog.youkuaiyun.com/youaigusheng/article/details/125540323

字体属性详解

1、font-family属性

1、font-family属性用于设置字体；
font-family："微软雅黑"；
2、字体可以是列表形式，一般英语字体放在前面，后面的字体是前面的字体的"后备份"字体；
font-family: serif, "Times New Roman", "微软雅黑"；
//字体名称中有空格，必须用引号包裹
3、中文字体也可以称呼它们的英语名字；
font-family: "微雅软黑"   font-family: "Microsoft Yahei"
font-family: "宋体"		font-family:"SimSun"
4、字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少；
5、如何设置为用户电脑中没有的字体呢？那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体；
6、字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件；
7、当我们拥有字体文件之后，就可以用@font-face定义字体；
@font-face{
font-family:'字体名称';
font-display: swap;
src: url('eot字体文件地址');
src: url('eot字体文件地址') format('embedded-opentype'),
url('woff2字体文件地址') format('woff2'),
url('woff字体文件地址') format('woff'),
url('tff字体文件地址') format('truetype'),
url('svg字体文件地址') format('svg'),
}

2、font-family实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      .para1{
         font-family:'宋体';
      }
      .para2{
        font-family:'SimSun';
      }
      .para3{
        font-family:'Microsoft Yahei';
      }

      .para4{
         font-family:'Times New Roman',serif,
      }
      .para5{
        font-style:italic;
      }
      .para6{
        font-weight:400(normal);
      }
      .para7{
        font-size:40px;
      }
  </style> 
</head>
<body>
    <p class="para1" class="spec">我是你爸爸</p>
    <p class="para2" class="spec">我是你爸爸</p>
    <p class="para3" class="spec">我是你爸爸</p>
    <p class="para4" class="spec">我是你爸爸</p>
    <p class="para5" class="spec">我是你爸爸</p>
    <p class="para6" class="spec">我是你爸爸</p>
    <p class="para7" class="spec">我是你爸爸</p>
   </div>
   </div>
   </div>
</body>
</html>

3、阿里巴巴普惠体

免费商用授权字体；
网址：
https://www.iconfont.cn/webfont
进入生成字体->引用字体->复制黏贴至<style></style>
也可以下载；
注意：如果你要输出"你好",你需要去阿里巴巴普惠体输入"你好"两个字(否则不生效），然后生成，复制黏贴至<style></style>

4、阿里巴巴普惠体实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    @font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_fwuqlcmcxae.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_fwuqlcmcxae.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/webfont_fwuqlcmcxae.woff2') format('woff2'),
  url('//at.alicdn.com/t/webfont_fwuqlcmcxae.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/webfont_fwuqlcmcxae.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/webfont_fwuqlcmcxae.svg#杨任东竹石体-Bold') format('svg'); /* iOS 4.1- */
}
      .para1{
         font-family:'宋体';
      }
      .para2{
        font-family:'SimSun';
      }
      .para3{
        font-family:'Microsoft Yahei';
      }

      .para4{
         font-family:'Times New Roman',serif,
      }
      .para5{
        font-family:'webfont';
      }
      h3{
        font-weight:400(normal);
          color:blue;
      }
      .para7{
        font-size:40px;
      }
  </style> 
</head>
<body>
    <p class="para1" class="spec">我是你爸爸</p>
    <p class="para2" class="spec">我是你爸爸</p>
    <p class="para3" class="spec">我是你爸爸</p>
    <p class="para4" class="spec">我是你爸爸</p>
    <p class="para5" class="spec">你爸爸还是你爸爸</p>
    <p class="para6" class="spec">请叫我爸爸</p>
    <p class="para7" class="spec">我是你爸爸</p>
    <h3>我是你爸爸</h3>
   </div>
   </div>
   </div>
</body>
</html>