css导入自定义字体

新建fonts.css,用@font-face加载字体:

@font-face{
    font-family: 'Oswald Medium';  /*需要导入的字体名*/
    src: url("../font/Oswald-Medium.ttf");  /*字体所在路径*/
    font-weight: normal;
    font-style: normal;
}

在其他css文件里就可以直接用啦

@import url('fonts.css');
.TitleDiv p {
    color: #06c;
    font-family: 'Oswald Medium';
    font-size: 25px;
}

字体下载链接:
https://www.fontke.com/

字体后缀名介绍:
ttf:http://baike.baidu.com/view/747447.htm
otf:https://baike.baidu.com/item/OpenType

效果展示:


不加导入字体的样式代码
不加导入字体效果
加上导入字体的样式代码
加上导入字体后效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-fac...
    我是强强阅读 4,138评论 0 0
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 11,495评论 0 12
  • 摘要:本篇文章包括(1)介绍@font-face(2)如何在网页中使用@font-face插入特殊字体(3)中文在...
    Masukio阅读 16,633评论 0 17
  • 这几天设计圈都被一条字体侵权消息刷屏,一公司在没有获得字体版权的情况下使用微软雅黑做印刷品,样稿印刷厂印了5000...
    UI黑客阅读 7,607评论 0 50
  • 2018-3-14 周三 晴 (123) 又开始了延点加班模式,回到家很晚了。 前几天投票选举职工代表时...
    灯下拾豆阅读 1,397评论 0 0