html - 我如何在具有 css 属性 font-family 的 HTML 页面中使用我的 azosans 自定义下载字体

Question

我尝试了很多方法将自定义 azo-sans 字体放入我的 HTML 页面中，但它不起作用，也不适用于我的 HTML 页面。

**Here, i have put some css property which i have tried.**


@font-face {
  font-family: AzoSansWebReg, sans-serif;
  src: url('../fonts/rui-abreu-azosans-regular.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: AzoSansWebLight, sans-serif ;
  src: url('../fonts/rui-abreu-azosans-light.otf') format('opentype');
  font-weight: 200;
}

@font-face {
  font-family: AzoSansWebMed, sans-serif ;
  src: url('../fonts/rui-abreu-azosans-medium.otf') format('opentype');
  font-weight: 600;
}

@font-face {
  font-family: AzoSansWebBold, sans-serif ;
  src: url('../fonts/rui-abreu-azosans-bold.otf') format('opentype');
  font-weight: 800;
}

What are things i need to change to apply this font in my HTML pages.

Answer 1

我会说你似乎以正确的方式添加了你的字体。我假设你已经检查了你的 url 路由，是吗？如果一切顺利，那么应用这些字体所需要做的就是像使用任何其他字体一样使用它们:

body {
  font-family: 'AzoSansWebLight', Fallback, sans-serif;
}

我强烈建议您查看 CSS-Tricks 页面:https://css-tricks.com/snippets/css/using-font-face/

CSS-Tricks 是一个很棒的网站，充满了丰富的知识和技巧。祝你好运!