@font-face:从HTML调用的src，而不是从CSS(joomla)调用的

Question

Allura Google字体在我的joomla网站上运行良好。这是我使用的拼写错误中存储的代码.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>

知道为什么以及我应该怎么做来解决这个问题吗？

多谢！

PS：我现在的做法很糟糕（因为最好从 css 组织所有内容），但我真的需要这样做。

Answer 1

不能将

字体说明与 src: ... 包含在 style 属性中，因为该属性具有特殊的受限语法。

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

Answer 2

我认为

您的问题是您需要将字体名称括在单引号中，以便

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

Answer 3

基于Jukka K. Korpela答案的代码：

<style>
         .allura{
            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');
            }
</style>
<p class="allura">Font generated from the article, without accessing the CSS</p>