我使用 Angular4，但在使用自定义字体时遇到问题。我尝试使用 font-face 但它给了我无法找到字体文件的错误。我需要做什么才能包含此文件以便在我的组件中使用它？
@font-face {
font-family: 'lcd-plain';
src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.eot'); /* For IE */
src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.ttf') format('truetype'), /* For Chrome and Safari */
url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.woff') format('woff'); /* For FireFox */
/*format("truetype"), url("/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.svg#LCD")*/
/*format("svg");*/
}
svg.gauge {
font-family: 'lcd-plain', Helvetica, Arial, sans-serif;
}
我认为问题在于角度如何重新设计组件中的路径。
我通常做的是在 src 下创建一个字体文件夹并将我的字体放在那里。
然后，我为自定义样式创建样式文件夹，其中放置包含以下内容的 font.scss：
$archistico-woff-font-path: "./fonts/archistico_bold-webfont.woff";
$archistico-woff2-font-path: "./fonts/archistico_bold-webfont.woff2";
$font-family-brand: 'archisticobold';
在我的 src 文件夹中有一个 styles.scss。我导入我的 fonts.scss
并在那里声明我的字体
@import "./src/styles/fonts";
@font-face {
font-family: 'archisticobold';
src:url($archistico-woff2-font-path) format('woff2'),
url($archistico-woff-font-path) format('woff');
font-weight: normal;
font-style: normal;
}
希望能帮助到你
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
