WEB字体浅谈

字体是面向客户的一种表现形式,但我们给一个页面设置css字体样式(font-family)时候,这时可能就会用到WEB字体了。了解web字体之前,首先说一下字体系列:
共有五个字体系列:1.sans-serif字体系列;2.serif字体系列;3.monospace字体系列;4.cursive字体系列;5.fantasy字体系列。每个字体系列都包含有大量的字体。


一般情况下,我们使用的字体都在上面的系列中,但是也有时候,我们需要使用特殊的字体比如:名叫aaa的字体,但是,我们面向的客户中,很大可能他们的设备中并没有这种字体,那么我们要给客户展现这种字体的话就会运到挫折了。要解决这种问题,就用到web字体(web font)向用户浏览器提供一种字体。同时也会使用css中的比较新的特性@font-face规则。


使用web字体的步骤:

1.找到一个字体:这是第一步,首先我们需要有特殊字体对吧?
2.确保有所需字体的格式:我们存贮字体的格式有多种,各个浏览器对具体格式支持程度也不同,字体格式有以下几种:

  • TrueType字体:.ttf
  • OpenType字体:.otf
  • Embedded Open Type 字体:.eot
  • SVG字体:.svg
  • web开放字体格式:.woff
    我们一般使用在现代浏览器上支持最为广泛的格式,也就是web开放字体格式。

    3.把字体文件放在web上:我们需要把字体文件放在服务器上,这样用户才能通过浏览器浏览到你的这种字体;(也就是字体的url),这里比如是:“http://www.aaa.com/font/aaa.woff”
    4.在css中增加@font-face属性:

@font-face{
font-family:"aaabbb";
src:url("http://www.aaa.com/font/aaa.woff");
}

5.在css中使用font-family名:一旦使用了@font-face规则后,也就可以在页面中为元素设定指定的字体样式了:h1{font-family:"aaabbb",sans-serif}

你可能感兴趣的:(CSS3)