如何使用带有@font-face 的webfont

Posted 2023-02-25

【中文标题】如何使用带有@font-face 的webfont

【英文标题】：How to use webfont with @font-face

【发布时间】：2012-07-14 07:41:42

【问题描述】：

我想将应用程序中的字体更改为自定义字体，但以下代码不起作用：

@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");

【参考方案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;

等等。

我希望这会有所帮助。 :)

【讨论】：

嘿，我已经在索引文件中应用了这个css，当我应用这个字体文本时没有显示，还有其他选择吗，如果我们在app.css中添加它也不起作用

这些如何应用到您的文件中？在 app.css 文件中只需像这样输入font，例如：label font: ArnoProBold; 或.your_class font: ArnoProBold; font-size: 12px;。我希望这有帮助。 ;)

ArnoProBold 是什么，同时拥有font-weight: normal ？