Question

我在美国，最近我完成了一个Magento网站。整个网站都使用Myriad Pro字体，并使用@ font-face将其加载到网站。

我的客户（在中国）说字体加载不正确。他将其视为时代罗马。我已经在美国的几台计算机上试过它，看起来装得很好。这就是我在CSS中编码的方式：

@font-face
{
font-family: Myriad Pro;
src: url(../font/MYRIADPRO-REGULAR.OTF);
}

非常感谢任何建议/解决方案/或原因不起作用。

谢谢！

Answer 1

如果您在IE中加载站点，则可以在控制台中看到错误，例如

CSS3114：@ font-face无法通过OpenType嵌入权限检查。权限必须是可安装的。文件：MYRIADPRO-REGULAR.OTF

所以转到这个site上传你的字体，现在你将获得一个rar文件。在服务器中提取并上传。

然后像这样改变你的CSS

@font-face {
    font-family: 'MyriadProRegular';
    src: url('myriadpro-regular.eot');
    src: url('myriadpro-regular.eot') format('embedded-opentype'),
         url('myriadpro-regular.woff') format('woff'),
         url('myriadpro-regular.ttf') format('truetype'),
         url('myriadpro-regular.svg#MyriadProRegular') format('svg');
}

让我知道这项工作与否。

Answer 2

从上述评论来看，我认为我有一个解决方案。我的客户遍布全球，每天都有非常类似的问题。

有趣的是，这是一个非常简单的修复。当您首次向客户展示您的网站/页面时，它会将样式表下载到缓存中。

以上是问题，只要求她完成硬刷新，看看是否有效，

通常适合我：）

Answer 3

您是否使用过.eot和. ttf字体格式的真实格式？不知道您仅使用.otf格式的原因。理想情况下，通过这种方式为跨浏览器调用自定义字体。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 4

尝试支持旧的IE版本。 IE6在中国拥有很大的市场份额。今天IE6 +奇虎360（安全IE6）的市场份额超过40％。

字体在中国没有显示

4 个答案: