md笔记——使用 @font-face 引入你喜欢的字体

时间：2023-03-08 15:40:56

使用 @font-face 引入你喜欢的字体

原理

CSS3的自定义字体@font-face 规则的工作原理

使用@font-face规则初看起来非常简单。从本质上看，它只需要两个步骤。 首先，使用 @font-face规则链接到在一个 Web 服务器上托管的字体。 然后，在 CSS 规则中的 font-family 属性中使用该字体。 非常简单。

一些问题

你需要准备该字体在 Mac 和 Windows 计算机上正确显示字母或在所有 Web 浏览器中运行所需的所有变体(如下)。

如果需要支持所有平台，你需要：

 @font-face {

    font-family: 'uxiconfont';

    src: url('uxiconfont.eot'); /* IE9*/

    src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

         url('uxiconfont.woff') format('woff'), /* chrome、firefox */

         url('uxiconfont.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

         url('uxiconfont.svg#uxiconfont') format('svg'); /*  iOS 4.1- */

	}

icon-font支持状况

  1. IE：从IE4开始支持eot格式，IE9开始支持woff。
  2. webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式
  3. Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
  4. Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
  5. Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；
  6. iPad, iPhone and Android 3.0+ 支持SVG fonts。

使用 Google Web Fonts

官网

  1. 您喜欢的字体，然后单击右下角字体名称下的 Quick-use 链接

  2. 挑选你希望展示的样式

    1. Choose the styles you want:

      Varela Round

      Normal 400

  3. 紧接着下面会给出如何引用这些链接

    3种方式，link的方式最简单：

    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>

  4. 然后它会给出示例 如何调用

     font-family: 'Alegreya Sans', sans-serif;