CSS 基础学习-098 css 使用谷歌字体样式

由 hrs, 13 十月, 2021

首先打开谷歌字体地址：https://fonts.google.com/，再选择字体样式，然后复制样式代码，粘贴到你的css样式表中就可以了。

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@200&display=swap" rel="stylesheet">

    <style>
      p.p1{
        font-family:'Noto Serif SC', serif;
        font-size:20px;
        }
      p.p2{
        font-family:'Ma Shan Zheng',cursive;
        font-size:20px;
      }   
      p.p3{
        font-family:'Liu Jian Mao Cao', cursive;
        font-size:20px;
      }   
    </style>
  </head>
  <body>
    <h1>引用谷歌字体实例</h1>
    <p class="p1">这个字段使用了谷歌字体:Noto Serif SC</p>
    <p class="p2">这个字段使用了谷歌字体:Ma Shan Zheng</p>
    <p class="p3">这个字段使用了谷歌字体:Liu Jian Mao Cao</p>
  </body>
</html>

运行效果：

css-098.png

 

标签

评论