zoukankan      html  css  js  c++  java
  • 关于@font-face的使用

      以前在写网页的时候,总是使用浏览器默认的字体,因此从未使用过@font-face,然而,最近在做官网的时候,UI规定了字体,要在所有浏览器下都展现同一效果。多番查询下,发现@font-face用起来是比较容易的。

      首先我们在使用某一特定字体的时候,需要先下载字体的源文件,例如方正北魏楷书简体(FZBWKSJW),方正兰亭特黑长简体等等,常用的字体格式有:.eot、.svg、.ttf、.woff这四种。  

      引自w3c的一段话

        Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.

        但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.

        注意: Internet Explorer 8 及更早IE版本不支持@font-face 规则.

      

      现在,假如,有.woff格式的文件,可以将其转换为其他三种格式的文件,这里推荐一个很好用的 在线字体转换网站 。然后选择你所需要的字体格式进行转换。转换完后,会自动下载。

      使用:

      例如:在index.html文件中使用方正北魏楷书简体(FZBWKSJW),那么可以这样做:

    <style>
        @font-face {
            font-family: myFont;
            src: url("./fonts/FZBWKSJW.ttf"),
                 url("./fonts/FZBWKSJW.eot");
         }
    
          .txt {
             font-family: myFont;
          }
    </style>    

      其中,@font-face里面的font-family用于定义字体的名称(必需的),src定义字体所存放的路径

      注意:同一网页中可定义多个@font-face,这样在同一网页中就可以使用多种字体了。

  • 相关阅读:
    网络设备安全需求规格
    web安全法则
    Write Hole 问题
    如何同步master的代码到fork分支代码
    Self assignment
    Uninitialized scalar variable
    Operands of different size in bitwise operation
    Insecure Compiler Optimization
    negative array index read
    Unintended sign extension
  • 原文地址:https://www.cnblogs.com/jf-67/p/9183828.html
Copyright © 2011-2022 走看看