css引入外部字体

css引入外部字体

@font-face{
    font-family: 'YaHei Consolas Hybrid';
    src : url('../fonts/yaheiconsolashybrid.ttf');
}

body{
    font-family: 'YaHei Consolas Hybrid';
    font-size: 16px;
    background: url(../img/bgContent.png) repeat;
}

 

不同浏览器字体的格式有差别

字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 
比如:
@font-face {
    font-family: 'HansHandItalic';
    src: url('fonts/hanshand-webfont.eot');
    src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hanshand-webfont.woff') format('woff'),
         url('fonts/hanshand-webfont.ttf') format('truetype'),
         url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
}

CSS3 @font-face

说@font-face是CSS3的新特性并不准确，因为CSS2就已经支持了这一特性，并且Internet Explorer早在第5版的时候就已经支持它了，不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式，其它浏览器都不支持这个格式。@font-face支持如下属性：

font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向的拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径。

示例代码：

body {font-family:'微软雅黑'}

@font-face {
font-family:微软雅黑;
src: url('微软雅黑.eot'); /* IE9 Compat Modes */
src: url('微软雅黑.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('微软雅黑.woff') format('woff'), /* Modern Browsers */
url('微软雅黑.ttf') format('truetype'), /* Safari, Android, iOS */
url('微软雅黑.svg#微软雅黑') format('svg'); /* Legacy iOS */
}

在页面中需要 的处所应用该字体：

h1{font-family: '微软雅黑';}

怎么把字体文件转换成.eot？
可以通过网页版转换工具进行转换，
http://ttf2eot.sebastiankippe.com（转换.eot）
http://www.kirsle.net/wizards/ttf2eot.cgi（转换.eot）
http://www.fontsquirrel.com/fontface/generator（格式全，支持转换.eot .woff .ttf .svg）




bootstrap,使用的字休引入

@font-face {
font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}