我的 Storenvy 页面上的自定义字体有问题

Posted 2023-02-27

【中文标题】我的 Storenvy 页面上的自定义字体有问题

【英文标题】：Having issues with a custom font on my Storenvy page

【发布时间】：2013-03-05 10:30:46

【问题描述】：

我正在使用来自 FontSquirrel 的网络字体，它提供了 webfont 工具包。我目前在“StilettoRedBand.com”的根文件夹中有文件，但在我的 Storenvy 页面 (stilettored.storenvy.com) 中，webfont 在标题或页脚中不起作用。

我一直在做这个项目，以至于我似乎错过了一些东西，并且很难找到问题所在，因为它一开始可以工作，然后就停止了。

谁能帮帮我？

这里是字体来源：http://www.fontsquirrel.com/fonts/WC-Mano-Negra-Bta

【问题讨论】：

如果您发布一些 CSS 会更好

【参考方案1】：

试试看

@font-face 
font-family:WCManoNegraBta;
font-weight:bold;
src:url("path-to-the-font-file/WCManoNegraBta.otf") format("opentype");

div 
  font-family:WCManoNegraBta;

【讨论】：

嘿 Mikatsu，运气不好。

你在你的元素上使用过它吗？可能只是您的浏览器不支持您在链接中提供的格式。

嘿 Mikatsu，它目前正在元素上使用。它现在似乎不适用于我的 Mac 上的 Firefox。

w3schools.com/css3/css3_fonts.asp Firefox、Chrome、Safari 和 Opera 支持 .ttf（True Type 字体）和 .otf（OpenType 字体）类型的字体。 Internet Explorer 9+ 支持新的@font-face 规则，但它只支持 .eot（嵌入式 OpenType）类型的字体。

【参考方案2】：

您需要确保获得所有需要的字体文件（.eot、.ttf、.woff 和 .svg）。单击“Webfont 工具包”选项卡并下载整个包。使用此代码并确保您的链接是正确的。您还应该尝试删除 'text-rendering: optimizeLegibility;'如果你正在使用这个。

@font-face 
font-family: 'WCManoNegraBtaRegular';
src: url('WCManoNegraBta-webfont.eot');
src: url('WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
     url('WCManoNegraBta-webfont.woff') format('woff'),
     url('WCManoNegraBta-webfont.ttf') format('truetype'),
     url('WCManoNegraBta-webfont.svg#WCManoNegraBtaRegular') format('svg');
font-weight: normal;
font-style: normal;

【讨论】：

嘿，这些都不适用于 Firefox。由于 Storenvy 不托管​​字体，我应该做一些不同的事情吗？它的结构如下： src: url('stilettoredtix.com/bandsite/WCManoNegraBta...

【参考方案3】：

我的 storenvy 商店在使用 Firefox 时遇到了同样的问题。这是我找到的解决方法：

How to add an Access-Control-Allow-Origin header

您只需要在字体所在文件夹中的 .htaccess 文件中添加以下代码：

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

我还没有让它工作，但我的网站托管在 godaddy 上，所以我不知道我的问题是否与此有关。

祝你好运！

【参考方案4】：

我也遇到了同样的问题！阅读这篇文章后，我最终得到了适合我的字体。

我所做的是将@font-face 代码添加到我的托管站点并将其保存为.css 文件

示例：http://lovepollution.com/andadrifont.css

然后我转到主题部分并单击“css模式”。我在样式表下面添加了。

@import url('http://lovepollution.com/andadrifont.css');

已保存并可立即使用。