阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS3 @font-face

      CSS3 @font-face 规则

      指定名为”myFirstFont”的字体,并指定在哪里可以找到它的URL:

      @font-face {
          font-family: myFirstFont;
          src: url('Sansation_Light.ttf'),
              url('Sansation_Light.eot'); /* IE9 */
      }
      

      浏览器支持

      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 规则.


      属性定义及使用说明

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

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

      • font-family: myFirstFont;

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

      • src: url(‘Sansation_Light.ttf’)

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

      现在准备使用该字体,下面是如何使用它所有的div元素的一个例子:

      div {
          font-family: myFirstFont;
      }
      

      语法:

      @font-face {
          font-properties
      }
      

      以下实例为在div中使用的字体:

      div {
          font-family: myFirstFont;
      }
      

      语法

      @font-face {
          font-properties
      }
      
      字体描述说明
      font-familyname必需的。定义字体的名称。
      srcURL必需的。定义该字体下载的网址(S)
      font-stretchnormal
      condensed
      ultra-condensed
      extra-condensed
      semi-condensed
      expanded
      semi-expanded
      extra-expanded
      ultra-expanded
      可选。定义该字体应该如何被拉长。默认值是”正常”
      font-stylenormal
      italic
      oblique
      可选。定义该字体应该是怎样样式。默认值是”正常”
      font-weightnormal
      bold
      100
      200
      300
      400
      500
      600
      700
      800
      900
      可选。定义字体的粗细。默认值是”正常”
      unicode-rangeunicode-range可选。定义该字体支持Unicode字符的范围。默认值是”ü+0-10 FFFF”

      相关文章

      CSS3 教程: CSS3 Fonts

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录