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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值