使用第三方平台转换字体文件为font-face所支持的格式。

TureTpe(.ttf)格式

  支持浏览器:IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

OpenType(.otf) 格式

  支持浏览器:Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

Web Open Font Format(.woff) 格式

  支持浏览器:IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

Embedded Open Type(.eot)格式

  支持浏览器:.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】

SVG(.svg) 格式

  Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

引入字体

@font-face {  

     font-family: "FamilyName";  

     src: url("path.eot");  

     src: url("path/to/*.eot?#iefix") format("embedded-opentype"),   

     url("path/to/*.woff") format("woff"),   

     url("path/to/*.ttf") format("truetype"),   

     url("path/to/*.svg#FamilyName") format("svg");  

     font-weight: normal;  

     font-style: normal;  

     }  

    FamilyName 会在刚刚下载的文件中的css 文件中有,可以直接使用,不用在定义

使用字体

    直接 style="font-family:FamilyName" 或直接class 内定义使用到指定元素上。

      div{font-family:myFirstFont;}

												

@font-face css3自定义个性化字体的更多相关文章

  1. css3自定义placeholder字体颜色

    ::-webkit-input-placeholder{color:#f00;} ::-moz-placeholder{color:#f00;} :-moz-placeholder{color:#f0 ...

  2. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  3. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  4. CSS3文本与字体

    一.CSS3 换行 1.word-break(规定自动换行的处理方法) word-break: normal / break-all / keep-all; /* normal:使用浏览器默认的换行规 ...

  5. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  6. css3文字与字体样式

    css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  8. 利用private font改变PDF文件的字体

    利用private font改变PDF文件的字体 前几天做项目,需要使用未安装的字体来改变PDF的文件.以前并没有实现过类似的功能,幸运的是我在网上找到了类似的教程,并成功实现了这个功能. 下面就跟大 ...

  9. CSS SANS – 神奇!使用 CSS3 创建的字体

    在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...

随机推荐

  1. 上传文件插件-bootstrap-fileinput

    1. js文件: <link href="/bootstrap/css/fileinput.css" media="all" rel="styl ...

  2. mysql应用学习-在cmd命令窗口下创建数据库和表

    运行以下操作,请确认您已经正确安装和配置了mysql. 首先要运行cmd.exe,进入命令窗口. step1. 进入MySQL monitor 如果您已登录mysql,可直接进入step2;若未登录请 ...

  3. [转]谷歌Chrome浏览器开发者工具教程—基础功能篇

    来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...

  4. Thrift笔记(五)--Thrift server源码分析

    从(四)server代码跟进 public static void simple(MultiplicationService.Processor processor) { try { TServerT ...

  5. Csharp and Vbscript: Encryption/Decryption Functional

      1 /// <summary>   2     /// 塗聚文   3     /// 20130621   4     /// 自定义字符串加密解密   5     /// < ...

  6. Linux在Tomcat下部署JavaWeb项目

    一.Linux快速部署War包操作 1.先关闭Tomcat /home/java/tomcat8/bin/shutdown.sh 注意:进入tomcat bin目录下操作 2.进入War包存放目录(可 ...

  7. Socket.Receive 无法预知字节长度的数据接收

    话不多说直接上代码: string recvStr = ""; byte[] recvBytes = new byte[1024]; int bytes; do { bytes = ...

  8. wxpython,wx.EVT_ENTER_WINDOW

    这个例子是鼠标移入,button的label显示“Over Me”,但是我运行没有显示求怎么回事

  9. MySQL几个join

    1.因为关系型数据库的基本原理,是基于“关系代数”.最重要的一类关系代数,就是2个集合之间的运算. 从集合运算的视角,去理解SQL中的几个常用join (1)inner join (2)left jo ...

  10. Anaconda中spyder 安装tensorflow

    关于Anaconda的安装就不介绍了,本文主要介绍spyder中安装 tensorflow.废话少说 直接重点: 1.安装好Anaconda之后,找到spyder图标 点击install,等待安装完成 ...