如何使用@font-face和web字体

Question

我想在我的应用程序中更改字体，但以下代码无法使用：

。

@font-face 
{
font-family: "ArnoProBold"; 
src: url("resources/fonts/ArnoProBold.ttf");
}
@font-face 
{
 font-family: "ArnoProCaption"; 
 src: url("resources/fonts/ArnoProCaption.ttf");
}
@font-face 
{
 font-family: "Arn";
 src: url("resources/fonts/ArnoProLightDisplay.ttf");
}

- Rithesh

Answer 1

嘿 @Ritesh 请尝试像这样做：

@font-face {
   font-family: 'ArnoProBold';
   src: url('resources/fonts/your_file.eot');
   src: url('resources/fonts/fonts?#iefix') format('embedded-opentype'),
        url('resources/fonts/your_file.woff') format('woff'),
        url('resources/fonts/your_file.ttf') format('truetype'),
        url('resources/fonts/your_file.svg#ArnoProBold') format('svg');
   font-weight: normal;
   font-style: normal;
}

等等，还有其他的事情。

我希望这可以帮到你。:)

- hekomobile

---

嘿，我在主文件中应用了这个 CSS，但是当我应用这个字体时，文字不显示，是否还有其他选项？如果我们将其添加到 app.css 中也无效。 - Rithesh

这些如何应用于您的文件中？在app.css文件中，只需像这样放置font，例如：label { font: ArnoProBold; }或.your_class { font: ArnoProBold; font-size: 12px;}。希望这可以帮到您。;) - hekomobile

当 font-weight: normal 时，ArnoProBold 是什么？ - Peyman Mohamadpour