使用第三方平台转换字体文件为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. java基础之登录程序

    注:此版本仅供学习使用! Login.java import java.awt.Font; import java.awt.event.*; import java.sql.*; import jav ...

  2. opencv2.4.10+VS2012配置问题

    opencv2.4.10+VS2012配置 作为opencv的初学者,第一个难题想必都一样,如何配置opencv+VS的环境呢?在网上的教程,铺天盖地,但我仍然是尝试了十几次才找到属于自己的那套配置方 ...

  3. 【Linux】Core dump故障分析

    引入: Q:如果一个程序运行3天后才会出错,这个时候难道需要我们一直用GDB调试程序3天吗? A:答案当然是否定的. 我们有更厉害的工具--Core dump 一.Coredump定义 Core Du ...

  4. [C# 网络编程系列]专题八:P2P编程

    引言: 前面的介绍专题中有朋友向我留言说介绍下关于P2P相关的内容的,首先本人对于C#网络编程也不是什么大牛,因为能力的关系,也只能把自己的一些学习过程和自己的一些学习过程中的理解和大家分享下的,下面 ...

  5. C# 取整问题

    关于C#里的取整问题,有向上和向下两种取整方式[1]向上取整a=1.2345string res = Math.Ceiling(Convert.ToDecimal(a)).ToString();str ...

  6. 再学UML-深入浅出UML类图(三)

    类与类之间的关系(2)       2. 依赖关系  依赖(Dependency)关系是一种使用关系,特定事物的改变有可能会影响到使用该事物的其他事物,在需要表示一个事物使用另一个事物时使用依赖关系. ...

  7. 探索grep命令

    grep是linux的一款搜索工具,基本啥linux版本都有自带此工具.下面部分参数若没有说明,表示功力不够,理解不了. 选择匹配器 -E 正则表达式(相当于egrep命令) -F 将pattern当 ...

  8. x64 分页机制——虚拟地址到物理地址寻址

    原博客:http://www.cnblogs.com/lanrenxinxin/p/4735027.html 详细的理论讲解都在上面 下面说的是通过windbg手动进行寻址,深入理解 x64: 实践: ...

  9. google Cayley图谱数据库初试

    一.安装 mkdir cayley cd cayley mkdir src export GOPATH=$(pwd) go get github.com/google/cayley go build ...

  10. 怎么在overflow-y:sroll的情况下 隐藏滚动条

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的 ...