angular6 使用自定义字体

angular2+项目打包自定义字体

第一步：设置自己的字体

下载或者制作自己的字体文件。

注意

• 体格式可以为：ttf,woff,eot

• 字体格式在引用时，注意设置 css 中字体格式的设置

  @font-face {
    font-family: 'Name You Font'; // 自定义名字
    src: url('assets/font/xxyourfontxxx.eot');
    src: local('Cera Pro Medium'), local('CeraPro-Medium'),
    url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
    url('assets/font/xxyourfontxxx.woff') format('woff'),
    url('assets/font/xxyourfontxxx.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }

   

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

在angular中设置的静态文件保存字体文件。

注意

静态文件设置路径。

• angular.json(angular6+) 中projects.archieect.build.assets 选项

• .angular-cli.json(angular6-) 中assets 选项

 

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

第三步：在styles.css中引用

注意：全局设置的样式文件设置，具体位置参照第二步。

在styles.css中加入下面代码： font-family是自己定义字体的名字。

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

第四步：引用

在需要的字体加上

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

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

 

也可以参考：https://www.jianshu.com/p/5178b01fb57d

css @font-face 语法参考：https://blog.csdn.net/RoddyLD/article/details/120763000