@font-face的一些细节

Posted 2020-11-08 qq3279338858

标准用法

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

@font-face
{
/*font-family多于一个单词时需要添加引号注明为字符串*/
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
       url(‘Sansation_Light.eot‘); /* IE9+ */
}

浏览器自动选择使用粗体

@font-face {
    font-family: myFirstFont;
    src: url(‘/example/css3/Sansation_Light.ttf‘),
         url(‘/example/css3/Sansation_Light.eot‘);
}

@font-face {
    font-family: myFirstFont;
    src: url(‘/example/css3/Sansation_Bold.ttf‘),
         url(‘/example/css3/Sansation_Bold.eot‘);
    /*相同font-family不同font-weight当文本需要显示为粗体，浏览器会自动判断。*/
    font-weight: bold;
}

<div style="font-family: myFirstFont;">
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>

兼容性用法

代码源于阿里巴巴矢量图标库

@font-face {
    font-family: "iconfont";
    src: url(‘iconfont.eot‘);
    /* IE9*/
    src: url(‘iconfont.eot#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
    url(‘iconfont.woff‘) format(‘woff‘), /* chrome, firefox */
    url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, android, ios 4.2+*/
    url(‘iconfont.svg#iconfont‘) format(‘svg‘);
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    /*决定了浏览器如何控制字体不要出现锯齿*/
    -webkit-font-smoothing: antialiased;
    /*指定文字描边宽度*/
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

实践范例

代码源于慕课网全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP 收藏

/*基于styl编译*/
@font-face
  font-family: ‘music-icon‘
  src: url(‘../fonts/music-icon.eot?2qevqt‘)
  src: url(‘../fonts/music-icon.eot?2qevqt#iefix‘) format(‘embedded-opentype‘),
          url(‘../fonts/music-icon.ttf?2qevqt‘) format(‘truetype‘),
          url(‘../fonts/music-icon.woff?2qevqt‘) format(‘woff‘),
          url(‘../fonts/music-icon.svg?2qevqt#music-icon‘) format(‘svg‘)
  font-weight: normal
  font-style: normal

[class^="icon-"], [class*=" icon-"]
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: ‘music-icon‘ !important
  /*语音*/
  speak: none
  font-style: normal
  font-weight: normal
    /*小型大写字母*/
  font-variant: normal
    /*控制文本的大小写*/
  text-transform: none
  line-height: 1

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale