网页中通过@font-face实现任意字体的展示

使用@font-face可以实现从服务器端加载字体，因而浏览器中使用的字体就可以不受本地字体的限制。各个浏览器支持的格式不同，我们需要不同的字体格式来解决兼容性的问题。常见的有otf，eot，ttf，svg，woff这几种，如果你只有其中一种，可以通过字体转换网站转换出其它几种格式，推荐onlinefontconverter这个网站进行转换，亲测为可用状态。

字体文件准备好后，在样式表中加入如下内容：

@font-face {
     /* font-properties */
     font-family: CodeLight;
     src:url('fonts/CodeLight.woff'),  
     url('fonts/CodeLight.ttf'),
     url('fonts/CodeLight.eot');
 }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在网页中插入特殊字体,浅谈@font-face
    摘要：本篇文章包括（1）介绍@font-face（2）如何在网页中使用@font-face插入特殊字体（3）中文在...
    Masukio阅读 16,520评论 0赞 17
  • 博客引入漂亮字体二三事
    最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将...
    晚晴幽草阅读 2,410评论 1赞 8
  • CSS3之@font-face 自定义字体
    标签（空格分隔）： CSS3 @font-face的是一个CSS规则，允许在网站上使用特定的字体，即使她在访问者的...
    ahcj_11阅读 974评论 0赞 1
  • CSS3新特性(04)：@font-face
    @font-face是CSS3新特性中的一个模块，今天就来介绍下它。它主要是把自定义的Web字体嵌入到你的网页中。...
    荷小音阅读 959评论 0赞 2
  • JS-高级
    JS高级03 注意: 1.将不同的功能放到不同的js文件中 2.将不同的功能代码划分到不同的函数中 3.每个js中...
    京河_简阅读 282评论 0赞 1