自定义字体获胜';t出现.浏览MIME、函数和字体系列.运气不好


Custom Fonts won't appear. Ran through MIME, Functions, and Font Family. No luck

使用WordPress网站。我可以将字体链接插入浏览器的url栏,字体自动下载,这样我相信它链接正确。

我在我的自定义字体文件夹中的一个单独的样式表中有所有的自定义字体,我使用@import链接到该文件夹,它们出现在我的浏览器源代码中,所以我认为这是可行的。目前,在进行故障排除时,我将一种字体直接放在我的主Child主题CSS文件中。我将在下面包含该代码。

 @font-face {
   font-family: 'Blackout Sunrise';
   scr: url('blackout_sunrise-webfont.eot');
   scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype'),
     url('blackout_sunrise-webfont.woff') format('woff'),
     url('blackout_sunrise-webfont.ttf') format('truetype'),
     url('blackout_sunrise-webfont.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }

我花了一整天的时间阅读和观看视频,试图了解问题所在。这让我想到了MIME。我在我的宿主Apache&nginx设置。我还在.htaccess文件的顶部添加了这些相同的MIME类型,我认为这是我网站的根目录,就在"#BEGIN WordPress"的上方。以下是我如何在两个位置添加它们:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
AddType image/svg+xml svg
AddType image/svg+xml svgz

运气不好。在一个论坛上,他们说你可能需要在functions.php中添加新的MIME类型支持,所以我在我的孩子主题中添加了下面的代码:

  function my_myme_types($mime_types){
    $mime_types['eot'] = 'application/vnd.ms-fontobject'; //Adding avi extension
    $mime_types['ttf'] = 'font/ttf';
    $mime_types['otf'] = 'font/otf';
    $mime_types['woff'] = 'application/x-font-woff';
    $mime_types['svg'] = 'image/svg+xml';
    $mime_types['svgz'] = 'image/svg+xml';
    return $mime_types;
  }
  add_filter('upload_mimes', 'my_myme_types', 1, 1);

还是什么都没有。我不知道下一步该做什么,也不知道哪里出了问题。今天花了8个小时试图弄清楚。我正在处理一个儿童主题。.htaccess在正确的位置吗?我需要创建一个新的吗?如果我找到解决方案,我会在明天发布。如有任何帮助,我们将不胜感激。(认为这将是容易的部分(

2016年8月27日-进展。

今天探索了更多。我移动了字体以减少出现文件路径错误的机会。一些论坛在url的括号中使用引号,而其他论坛则没有。我都试过了。一个论坛引起了人们对该文件"读写"特权的关注。"我"有读写权限,我把"工作人员"也改为有读写特权,按照论坛的建议,把"所有人"都改为只读。然后我将文件重新加载到服务器。没有解决问题。

这是一篇很棒的文章:http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

我没有在@font face中声明svg#id,他们使用了一种不同的技术来对抗IE,这似乎更有效。这就是我现在的处境:

@font-face {
  font-family: 'Blackout Sunrise';
  scr: url('type/blackout_sunrise-webfont.eot');
  scr: local("☺"),
    url('type/blackout_sunrise-webfont.woff') format('woff'),
    url('type/blackout_sunrise-webfont.ttf') format('truetype'),
    url('type/blackout_sunrise-webfont.svg#BlackoutSunrise') format('svg');
  font-weight: normal;
  font-style: normal;
}
.practice-font h3 {
  font-family: 'Blackout Sunrise';
  color: #8b0000;
  text-transform: uppercase;
  border: 1px solid green;
  letter-spacing: 3px;
}

我还发现,由于以下信息,我可能将MIME命名错误:http://www.jbarker.com/blog/2009/mime-type-css-web-fonts

所以我上传了这两个新的MIME类型除了在我的宿主Apache&nginx设置和根htaccess文件。

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf 

论坛讨论了自定义字体加载速度慢的问题,如果浏览器花费太长时间,他们就会在自己的位置加载默认字体。不知道如何检查。

我上传了一个谷歌字体,使用了typekit,几分钟内就完成了。仍然不知道我对这些@font face

做错了什么
scr: url('blackout_sunrise-webfont.eot');
scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype')

请注意scr。应该有src

但是,这可能只是第一个问题。