自定义字体不会出现.通过MIME,函数和字体系列.没运气

Question

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

我在我的自定义字体文件夹中的单独样式表中有所有自定义字体,我使用@import链接到它们,它们出现在我的浏览器源代码中,所以我认为检查出来.目前,在排除故障时,我将一个字体直接放在我的主要Child Theme 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设置中添加了自定义MIME类型.我还在我的.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是否在正确的位置,我是否需要创建一个新的？如果我找到解决方案,我明天会发布.任何帮助将不胜感激.(认为​​这将是容易的部分)

8/27/16 - 进展.

今天更多探索.我移动了字体以减少文件路径错误的可能性.一些论坛在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

所以我在我的托管Apache&nginx设置和root htaccess文件中除了上面的MIME类型之外还上传了这两个新的MIME类型.

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

论坛已经谈到了使用自定义字体的加载速度慢,如果浏览器花费的时间太长,那么他们会在其位置加载默认字体.不知道怎么检查.

我上传了一个谷歌字体并使用了typekit,并在几分钟内完成了这些工作.仍然不知道我对这些@ font-faces做错了什么

Answer 1

scr: url('blackout_sunrise-webfont.eot');
scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype')

注意scr。应该有src

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