css - 字体文件不在 angular2 中呈现

Question

我在 assets/font 文件夹中添加字体文件，然后创建名为 fontiran.css

的波纹管 css 文件

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('.//iran.font/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('./iran.font/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('./iran.font/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('./iran.font/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('./iran.font/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('./iran.font/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('./iran.font/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('./iran.font/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('./iran.font/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('./iran.font/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('./iran.font/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('./iran.font/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('./iran.font/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('./iran.font/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('./iran.font/eot/IRANSansWeb(FaNum).eot');
    src: url('./iran.font/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('./iran.font/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('./iran.font/woff/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('./iran.font/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

然后将样式表文件添加到angular-cli.json:

"styles": [  
     ...
        "./assets/font/fontiran.css",
     ...
         "styles.css"    

      ],

然后将字体系列名称添加到正文中:

body{
font-family:font-family: IRANSans;
}

在运行时，我检查了元素，我看到 fontirans.css 已呈现，但在网络选项卡中我没有看到 ttf、eot 和 woff 文件。

Answer 1

一个选项是使用 base64 编码。 前往网站 https://transfonter.org/并上传字体，勾选Base64编码。 祝你好运