欢迎光临
我们一直在努力

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

今天在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即可!

赞(0) 打赏
未经允许不得转载:新起点博客 » CSS3中引入多种自定义字体font-face

评论 抢沙发

评论前必须登录!