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：设置自定义字体的相对路径或者绝对路径。

示例代码：

[css]  view plain  copy

 

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

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

[css]  view plain  copy

 

1. 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');
}

转载于:https://www.cnblogs.com/my2018/p/9193480.html