引用阿里妈妈字体实列

这是一个用于在 HTML 文档中引用阿里妈妈数黑体粗体字体的样式表代码。你可以将这段代码复制到你的 HTML 文档中的 <style> 标签中，如下所示。

<style>
    @font-face {
        font-family: "阿里妈妈数黑体 Bold";
        font-weight: 700;
        src: url("字体链接") format("woff2"),
             url("字体链接") format("woff");
        font-display: swap;
    }
    
    /* 示例用法 */
    body {
        font-family: "阿里妈妈数黑体 Bold", Arial, sans-serif;
    }
</style>

上述代码将字体定义为 "阿里妈妈数黑体 Bold"，并设置了其加粗的字体权重为 700。这个样式表还定义了在阿里巴巴云资源链接中引用的字体文件，并使用了 font-display: swap 属性来提高字体加载的性能。最后，示例用法展示如何在 body 元素中应用这个字体。

演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>演示字体</title>

  <style>
    @font-face {
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
      src: url("字体链接") format("woff2"),
         url("字体链接") format("woff");
      font-display: swap;
    }

    /* 使用示例 */
    body {
      font-family: "阿里妈妈数黑体 Bold", sans-serif;
    }
  </style>

</head>
<body>
  <h1>测试标题</h1>

  <p>测试段落</p>
</body>
</html>

在上述示例中，我们在 <head>标签里面定义了如何加载所需的字体，然后在样式表中通过 font-family属性来指定使用该字体。请注意，在 font-family 属性中，我们不仅指定了该字体的名称 "阿里妈妈数黑体 Bold"，还提供了一个备用的 sans-serif 字体作为回退选项。这样，在字体无法加载时，页面仍将可以使用另一个可用的字体。

posted @ 2023-06-26 14:58  小kBlog  阅读(1529)  评论(0)    收藏  举报