CSS3 字体

前言

  • 使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。

  • 使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。

属性 描述 CSS 备注 🔗
font 在一个声明中设置所有的字体属性 1 🔗
font-family 指定文本的字体系列 1 🔗
font-size 指定文本的字体大小 1 🔗
font-style 指定文本的字体样式 1 🔗
font-variant 以小型大写字体或者正常字体显示文本 1 🔗
font-weight 指定字体的粗细 1 🔗
@font-face 一个规则,允许网站下载并使用其他超过 “Web- safe” 字体的字体 3 🔗
font-size-adjust 为元素规定 aspect 值 3 🔗
font-stretch 收缩或拉伸当前的字体系列 3 🔗

1、@font-face 规则

  • 当发现要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。

  • 所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

  • “自己的” 的字体是在 CSS3 @font-face 规则中定义的。

  • 在新的 @font-face 规则中,必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

  • 如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)。

  • 提示:URL 请使用小写字母的字体,大写字母在 IE 中会产生意外的结果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    @font-face {
    font-family: myFirstFont; /* 自定义一个字体名称 */
    src: url(https://demo.qianchia.com/font/Sansation/Sansation_Light.ttf),
    url(https://demo.qianchia.com/font/Sansation/Sansation_Light.eot); /* IE9 */
    }
    div {
    font-family: myFirstFont;
    }
    </style>
    1
    2
    3
    <div>
    使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体
    </div>
  • 效果



    使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体

  • 注意: Internet Explorer 9 只支持 .eot 格式的字体。

2、使用粗体文本

  • 必须添加另一个包含粗体文字的 @font-face 规则。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
    @font-face {
    font-family: myFirstFont;
    src: url(https://demo.qianchia.com/font/Sansation/Sansation_Light.woff);
    }
    @font-face {
    font-family: myFirstFont;
    src: url(https://demo.qianchia.com/font/Sansation/Sansation_Bold.woff);
    font-weight: bold;
    }
    div {
    font-family: myFirstFont;
    }
    </style>
    1
    2
    3
    <div>
    使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体
    </div>
  • 效果



    使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体

  • 解析

    • 该文件 “Sansation_Bold.ttf” 是另一种字体文件,包含 Sansation 字体的粗体字。
    • 浏览器使用这一文本的字体系列 “myFirstFont” 时应该呈现为粗体。
    • 这样就可以有许多相同的字体 @font-face 的规则。

3、浏览器支持

属性
@font-face 4.0 9.0 3.5 3.2 10.0
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

  • Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体。

  • Firefox, Chrome, Safari, 和 Opera 支持 .ttf (True Type 字体) 和 .otf (OpenType) 字体字体类型。

  • Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

  • Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

  • Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

文章目录
  1. 1. 前言
  2. 2. 1、@font-face 规则
  3. 3. 2、使用粗体文本
  4. 4. 3、浏览器支持
隐藏目录