页面css设定特殊字体

先建立一个放特殊字体的文件夹,

字体文件兼容性:
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。


定义特殊字体(可在页面公共css里写)

@font-face {
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9+ */
}

使用

div {
  font-family:myFirstFont;
}

eot、.woff、.svg每种格式的文件都可以用专门的工具转换得到,同时也有专门的用于生成@font-face文件的网站,可以将字体文件上传到网站上,转换后下载,然后就可以嵌入到网页上使用了。
fontsquirrel
freefontconverter
font2web

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-fac...
    我是强强阅读 4,147评论 0 0
  • 摘要:本篇文章包括(1)介绍@font-face(2)如何在网页中使用@font-face插入特殊字体(3)中文在...
    Masukio阅读 16,661评论 0 17
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 11,515评论 0 12
  • 接上 关于CSShttp://www.jianshu.com/p/01d228219d59 学习CSS3的最佳网站...
    Amyyy_阅读 3,658评论 0 1
  • 最近兴致上来,就想更换了那Blog标题字体(汉字的);网上搜索了一番,发现蘇新詩柳繁體这款甚合我心;然后就着手搞将...
    晚晴幽草阅读 7,085评论 1 7

友情链接更多精彩内容