@FONT-Face对于斜体/粗体字体不能正常工作
我正在使用一个工具自动生成CSS,它会生成以下@Font-Face标签和相应的段落样式
@font-face {
font-family:FF-Garamond-Italic;
src:url("../fonts/16309_GARAIT (1).ttf");
font-style:italic;
}
p.autoParaStyle3 {
font-family:FF-Garamond-Italic;
font-size:32px;
line-height:40px;
color:#000;
text-align:justify;
}
请注意,指定的字体已经是Garamond字体的斜体版本,从技术上讲font-style:italic
行是多余的。
font-style:italic
行,则文本将按预期以Garamond斜体正确呈现。
因此,我有两个问题
为什么这不起作用,意思是为什么有
font-style:italic
会导致它不起作用?有没有办法"覆盖"@Font-Face定义以通过javascript使用
font-style:normal
?
我问这个问题的原因是,我不能控制生成上面的css的工具,所以不能接触该文件。
此外,我还尝试用相同的名称在Java脚本中创建一个新的@Font-Face,但我不想在index.html中再次指定"src",因为该文件和css文件被进一步操作到不同的位置--所以我希望"src"只相对于css文件,并从那里被选取。
提前谢谢!
解决方案
对于使用Create React App的人,font-face
可能会根据入口点的不同而得出不同的结果。这是我注意到的:
- 如果选择将
css
文件直接链接到public/index.html
,则可以将font-face
与font-family
和不同的font-style
一起正常使用:
@font-face {
font-family: "FontName"; <---
font-style: normal; <---
font-weight: normal;
src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
font-family: "FontName"; <---
font-style: italic; <---
font-weight: normal;
src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
/* Usage */
.text {
font-family: FontName;
font-style: normal;
}
.text-italic {
font-family: FontName;
font-style: italic;
}
- 如果您选择通过Js链接
css
文件以进行捆绑,则需要为您的所有italic
字体使用不同的font-family
,并使用普通font-style
。
@font-face {
font-family: "FontName"; <---
font-style: normal; <---
font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
font-family: "FontNameItalic";
font-style: normal; <----
font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
/* Usage */
.text {
font-family: FontName;
}
.text-italic {
font-family: FontNameItalic;
}
相关文章