css自定义字体怎么设置?

在制作网页的时候我们通过会通过设置 font-family 来定义页面字体,但有的时候系统自带的字体并不能满足我们的全部需求,为了页面的丰富性和美观性,我们可能需要在特定的地方使用一些特定的字体。

下面我们来看一下css设置自定义字体的方法。

1、使用@font-face引入字体文件,并且定义该字体的名称为:myFirstFont(自己随便写)

<style> 
  @font-face{
    font-family: myFirstFont;
    src: url('你自己的字体文件路径.ttf')
  }
</style>

2、使用:

<body>
    <div>这是默认字体</div>
    <div class="my_font">这是自定义字体</div>
    <div class="my_font">一二三四五六七八九十</div>
    <div class="my_font">哈哈哈哈</div>
</body>

<style> 
    @font-face{
      font-family: myFirstFont;
      src: url('你自己的字体文件路径.ttf') 
  } 
  .box{ font-family:myFirstFont; } 
</style>

@font-face规则,网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称,font - face规则:

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方,参考CSS:

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置,请使用完整的URL:

src: url('字体地址')

推荐:css手册

以上就是css自定义字体怎么设置?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读