css如何导入特殊字体

来源:互联网 发布:淘宝店铺卖家中心在哪 编辑:程序博客网 时间:2024/05/08 11:39

使用您需要的字体

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

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

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

实例

<style> 

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}


div
{
font-family:myFirstFont;
}
</style>

如何设置全局字体:

 @font-face{
         font-family: "Hiragino sans GB W3";
         src: url('../font/font.ttf');
 }

html,body,div,span,h1,h2,h3,h4,h5,h6,p{
      font:  normal  16px   "Hiragino sans GB W3",sans-serif;
      vertical-align:baseline;
      outline:none;
      box-sizing:border-box;
}
      

使用粗体文本

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

实例

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

该文件"Sansation_Bold.ttf"是另一种字体文件,包含Sansation字体的粗体字。

浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。

这样你就可以有许多相同的字体@font-face的规则。



CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义:

描述符值描述font-familyname必需。规定字体的名称。srcURL必需。定义字体文件的 URL。font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可选。定义如何拉伸字体。默认是 "normal"。font-style
  • normal
  • italic
  • oblique
可选。定义字体的样式。默认是 "normal"。font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认是 "normal"。unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
0 0