html - @font-face : src called from HTML not from CSS (joomla)

Question

Allura Google 字体在我的 joomla 网站上运行良好。这是存储在我使用的 typo.css 中的代码:

@font-face {
  font-family: 'font allura';
  font-style: normal;
  font-weight: 400;
  src: local('Allura'), local('Allura-Regular'), url(http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff) format('woff');
}

.allura{ font-family: 'font allura'; font-weight: bold; }

出于某些原因，我希望能够在我的文章中直接调用此字体。所以我用这个 HTML 创建了一篇文章:

<p style="font-family: font allura; font-style: normal; font-weight: 400; src: local('Allura'), local('Allura-Regular'), url('http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff') format('woff');">Font generated from the article, without accessing the CSS</p>

但它不起作用，我最终使用了默认字体。我也尝试过但没有成功:

<p style="font-family: font allura; font-style: normal; font-weight: 400; src= "http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff";">test direct dans article</p>

知道为什么以及我应该如何解决这个问题吗？

非常感谢!

P.S:我现在这是不好的做法(因为最好从 css 组织所有内容)，但我真的需要那样做。

Answer 1

您不能将带有 src: ... 的字体描述包含到 style 属性中，因为该属性具有 special limited syntax .

因此您需要在 style 元素或链接的样式表中使用 @font-face 规则。如果出于某些技术原因需要，实际上您可以将 style 元素放在 p 元素之前；根据规范，style 元素必须出现在 head 元素中，但实际上它也适用于 body。