Angular2+中如何引用自定义的字体

项目中客户提出需要用华文彩云字体,搜了下css的font-family有这个字体,但是在macos中好像不起作用(不知道是不是我用的不对)。所以就只能从网上下载字体,然后引用到项目中。

第一步:下载华文彩云字体

这个在网上可以很容易下载到。下载下来后找到.ttf文件。

第二步:将字体放在项目中

在assets文件夹下创建font文件夹,将.ttf文件放入font文件下。

第三步:在styles.css中引用

在styles.css中加入下面代码:

@font-face {
    font-family: 'huaWenCaiYun';
    src: url('assets/font/huawencaiyun.ttf');
    font-weight: normal;
    font-style: normal;
  }

font-family是自己定义字体的名字。

第四步:在需要的字体加上css

font-css{
   font-family: 'huaWenCaiYun';
}

angular2以后的版本可能会有细微的变更,但是问题不大。

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

推荐阅读更多精彩内容

  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,363评论 0 12
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,632评论 1 45
  • 摘要:本篇文章包括(1)介绍@font-face(2)如何在网页中使用@font-face插入特殊字体(3)中文在...
    Masukio阅读 16,524评论 0 17
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,332评论 2 66
  • 今天值班,有位大学生,为情所困,手锤玻璃,结果血肉模糊。 还好,只是一根肌腱断裂,给予缝合,石膏固定,只要配合治疗...
    刘洪君V阅读 1,059评论 4 5