zoukankan      html  css  js  c++  java
  • 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转换。
  • 相关阅读:
    作业2(4)求m和n之间的和
    作业2(3)计算x的n次方
    作业3(6)查询水果的单价。有 4 种水果,苹果(apples)、梨(pears)、桔子(oranges)和葡萄(grapes),
    作业3(5)输入五级制成绩(A-E),输出相应的百分制成绩(0-100)区间,要求使用 switch语句。
    作业3(4)循环输入多个年份 year,判断该年是否为闰年。判断闰年的条件是:能被 4 整除但不能被100 整除,或者能被 400 整除。输入-1退出程序执行
    P39-习题2-5
    P39-习题2-7
    计算N户电费
    P39-习题2-4
    P39-习题2-3
  • 原文地址:https://www.cnblogs.com/xiazdong/p/3578217.html
Copyright © 2011-2022 走看看