阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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-family name 必需的。定义字体的名称。
    src URL 必需的。定义该字体下载的网址(S)
    font-stretch normal
    condensed
    ultra-condensed
    extra-condensed
    semi-condensed
    expanded
    semi-expanded
    extra-expanded
    ultra-expanded
    可选。定义该字体应该如何被拉长。默认值是"正常"
    font-style normal
    italic
    oblique
    可选。定义该字体应该是怎样样式。默认值是"正常"
    font-weight normal
    bold
    100
    200
    300
    400
    500
    600
    700
    800
    900
    可选。定义字体的粗细。默认值是"正常"
    unicode-range unicode-range 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

    相关文章

    CSS3 教程: CSS3 Fonts

    卖前端学习教程

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

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

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

    目录
    目录