CSS3嵌入Web字体

一、@font-face语法

1.格式

@font-face { 
font-family: ; 
src:  [] [,  []]*; 
[];
     }                                                                          

2.相关参数

• identifier：字体名称
• url：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
  
• string:字体的格式，主要用来帮助浏览器识别, format(fontType)
  • fontType取值：
    • truetype:.ttf
      • Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+
    • opentype:.otf
      • Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+
    • Web Open Font Format:.woff
      • Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+
    • embedded Open Type:.eot
      • IE4+
    • svg:.avg
      • Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+
• font:定义字体相关样式
  • 取值：
    • font-weight
      
    • font-style
      
    • font-size
    • font-variant
      
    • font-stretch

3.字体格式兼容性

@font-face {
    font-family: 'diyfont';
    src:url('diyfont.eot'); /* IE9兼容模式 */
    src:url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
        url('diyfont.woff') format('woff'), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
        url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
        url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

二、相关工具

1.Web字体定制

• http://www.iconfont.cn/webfont/#!/webfont/index 阿里Web字体
• http://www.youziku.com/ 字体库网站

2.Web字体转换工具

• https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具

3.使用字体图标

• 常用的字体图标库
  • 阿里图标:http://www.iconfont.cn/
  • Font Awesome:http://fontawesome.dashgame.com/
  • Glyphicons Halfings:http://glyphicons.com/
• 字体图标制作工具
  • http://icomoon.io/app/#/select
  • http://www.iconfont.cn/help/iconmake.html阿里图标

三、相关示例

例1.下载文字

例2.使用link引入

转载于:https://www.cnblogs.com/1666818961-lxj/p/7308021.html