zoukankan      html  css  js  c++  java
  • Web字体大揭秘

    网页中字体三个来源:

     用户机器中安装的字体(在网页中放心使用的字体);

     保存在第三方网站上的字体。常见Typekit和Google,使用link标签链接到页面;

     保存在自己的Web服务器上的字体。使用@font-face.

    Web字体设置方式:

     使用Google Web Fonts或Adobe的Typekit等公共字体库。

     使用事先打包好的@font-face包。

     使用Font Squirrel用自己的字体生成@font-face包。

    Web字体通用类(给字体添加通用类是保险的方法):

      serif:衬线字体,在每个字符笔画的末端会有一些装饰线;

      sans-serif:无衬线字体,字符笔画末端没有装饰线;

      monospace:等款字体,每个字符的宽度相等(也称代码体);

      cursive:草书体或手写体;

      fantasy:不能归入其他类别的字体(一般都是奇形怪状的字体)。

      在页面显示字体的样式  

    使用上边五种字体是确保在最坏的情况下,文档代码可以以正确的字形显示。

    1.公共字体库

    1.1使用Google Web Fonts 

    打开http://www.google.com/webfonts,找到想要的字体,单击Add to Collection按钮,点击Use按钮,即可生成选定字体的链接。

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Anton|Niconne|Prata"/>
    <style>
       body{font-size:20px;font-family:Anton,serif;}
    </style>
    </head>
    <body>
      <div>link - Google 字体</div>
    </body>

    2.打包的@font-face包

    @font-face是CSS2的语法,允许在网页上显示自定义字体。所有浏览器都可以使用。

    2.1使用规则

    可以从网上或者第三方Web服务器下载到字体。这种方式在浏览器第一次加载时,会被缓存下来,之后就不用下载。

    2.2语法

    @font-face{
      font-family: 字体名称;
      src:url(路径)
            format("格式"),
            url(路径)
            format("格式"),
            ...;
       font-weight:normal;
       font-style:normal;
    }

    2.3@font-face兼容

         不同浏览器要求的字体格式不同。如:

         a.Webkit/Safari(3.2+):TrueType/OpenType  TT(.ttf) 、OpenType PS(.otf)。

         b.Opera(10+):TrueType/OpenType  TT(.ttf) 、OpenType PS(.otf)、SVG(.svg)。

         c.IE4开始使用EOT(EmbeddedOpenType);IE9使用WOFF。

         d.Firefox(3.5+):TrueType/OpenType TT(.tff)、OpenType PS(.otf)、WOFF(since Firefox 3.6)。

          f.Google Chrome:TrueType/OpenType TT(.ttf)、OpenType PS(.otf)、WOFF since version 6。

          g.iOS4.1之前版本中移动Safari以及其他浏览器使用SVG格式,iOS4.1之后的移动Safari使用OTF(OpenType)或TTF(TrueType)字体。

         由a~g可以得出:.eot + .ttf / .otf + svg + woff = 所有浏览器都完美支持

         Font Squirrel(http://www.fontsquirrel.com)提供了很多字体包。每个字体包中都含所有格式的字体和为每款浏览器提供正确格式的CSS代码。

    2.4生成@font-face包

       首先获取转换Web字体使用授权,使用Font Squirrel还有一个转换程序,可以把上传的字体转成字体包。

  • 相关阅读:
    vs2008 当前上下文不存在名称xxx 解决办法
    SQL Server 2008故障转移集群+数据库镜像配置实例之一
    通过JavaScript获取页面大小
    使用JavaScript判断浏览器类型
    sql2008安装图解sql2008安装全过程
    Sqlserver中对时间类型的字段转换
    SQL Server 2008故障转移集群+数据库镜像配置实例之三
    这年头口罩都成时尚品
    一位软件工程师的6年总结[转]
    MS SQL Server查询优化方法[转]
  • 原文地址:https://www.cnblogs.com/zmr2520/p/6050430.html
Copyright © 2011-2022 走看看