Question

我在assets / font文件夹中添加字体文件，然后创建名为fontiran.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;
}

然后将font-family名称添加到body：

{{1}}

在运行时我检查元素，我看到fontirans.css被渲染，但在网络选项卡中我没有看到ttf和eot和woff文件。

Answer 1

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

Answer 2

show必须将文件夹字体放在文件夹资源中，然后使用字体。文件夹资产用于文件图像和字体。

字体文件不会在angular2中呈现

2 个答案: