CSS3:@font-face规则

前言

过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体。但Web安全字体有时并不好看...

@font-face能够使得任何一台机器能够显示理想中的字体。

字体定义文件

这里我们只要知道有这些格式的字体文件即可,不用背下来。

  • ttf:True Type Font,Windows里面一般都是这种格式的,【控制面板】->【字体】可以查看系统自带字体。
  • otf:Open Type Font
  • eot:Embeded Open Type, IE仅支持该字体。
  • woff:Web Open Font Format。
  • svg:基于SVG渲染的字体。

@font-face

定义字体

 @font-face {

      font-family: <name>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
}

  • <name>:设置自定义字体的名称,使用字体时引用该名称即可。
  • <source>:定义字体定义文件的路径。
  • <format>:帮助浏览器识别字体格式。
  • <weight>和<style>在CSS中已经介绍过。

使用字体

font-family: <name>;

@font-face 规则模板

@font-face {
    font-family: ‘bradley_hand_itcregular‘;
    src: url(‘bradhitc-webfont.eot‘);   /* IE9 Compat Modes */
    src: url(‘bradhitc-webfont.eot?#iefix‘) format(‘embedded-opentype‘),  /* IE6-IE8 */
         url(‘bradhitc-webfont.woff‘) format(‘woff‘),   /* Modern Browsers */
         url(‘bradhitc-webfont.ttf‘) format(‘truetype‘),   /* Safari, Android, iOS */
         url(‘bradhitc-webfont.svg#bradley_hand_itcregular‘) format(‘svg‘);  /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

Google Fonts

  • 虽然CSS3支持自定义字体(将ttf等字体文件放在工程目录下,然后使用@font-face引入),但是目前我比较推荐的方法是使用Google Web Fonts 来使用额外的字体。
  • Google Web Fonts 可以看做是一个字体数据库,他虽然内部也使用了@font-face 规则定义字体,但是用户不需要直接接触到 @font-face,只需要简单一步即可使用。
  • 比如我们想使用 Open Sans 这个字体,则只需要:
    • 引入:

      <link href=‘http://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘>
    • 使用:
      font-family: ‘Open Sans‘, sans-serif;  

Dafont

  • 主页:http://www.dafont.com/
  • 一个字体库,如果要使用,则你需要下载该文件(ttf格式),并安装或使用@font-face引入。(但一般我们先使用 Font Sqluirrel 转换)

Font Squirrel

  • 特别注意:下载的rar包中的stylesheet.css里面就已经定义了你的@font-face规则,你可以不用自己写,直接复制黏贴到项目中去。
  • 因此通常的流程:在Dafont.com中下载ttf文件,使用Font Squirrel转换。

CSS3:@font-face规则,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。