CSS3中引入多种自定义字体font-face

原创 新起点博客  2020-06-30 15:01 
【上云必备】上云仅?102/年

今天在HTML中发现了一个问题,提供给我们默认的字体有很多,但是除了那些“黑体”、“宋体”、“微软雅黑”等支持中文字体之外,其余的都不知道中文字体,如果我们需要用自己喜欢的字体怎么办呢?CSS3中是否可以引入自定义下载的字体呢?如果可以我们应该怎么引入?一下就是新起点博客总结的相关内容,希望可以帮助到大家:

首先我们要引入某个字体,就应该有这么个字体,下载字体放到项目的font文件夹下面。字体大家可以自行下载共享资源网就不在这里说了。

HTML:

//
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字体文件测试</title>
    </head>
    <body>
        <div class="chunlian">春联标准字体测试</div>
        <div class="jiangnan">江南艺术调字体测试</div>
        <div class="maozedong"> 毛泽东字体测试</div>
    </body>
</html>

CSS:

@font-face {
              font-family:'chunlian';
              src: url(font/chunlian.ttf);
          }
          @font-face {
              font-family: 'jiangnan';
              src:url(font/jiangnan.ttf);
          }
          .chunlian{
              font-family: 'chunlian';
              font-size: 50px;
              text-shadow: none;
          }
          .jiangnan{
              font-family: 'jiangnan';
              font-size: 40px;
          }
          @font-face {
              font-family: 'maozedong';
              src:url(font/maozedong.ttf);
          }
          .maozedong{
              font-family: 'maozedong';
              font-size: 50px;
              text-shadow: none;
          }

 

如果再加入其他字体直接在CSS中写@font-face即可!

本文地址:https://www.henenseo.com/archives/2720
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情