自定义字体上Holder.js对象

Question

这是输出是如何应该是，是，在Firefox：

https://www.dropbox.com/s/4uxz6l5po0bkhat/firefox.png?dl=0

然而，Chrome和Opera不使用的Holder.js这个自定义字体对象。这是他们如何使它：

https://www.dropbox.com/s/q2i0o6a61lq1hyx/opera-chrome.png?dl=0

这里是我的主要HTML的头：

<link rel="stylesheet" type="text/css" href="css/zond.fonts.css" class="holderjs"> 
<script src="js/holder.min.js"></script> 
<script src="js/holder.themes.old.js"></script> 

这里是我的holder.js对象：

<object data-src="holder.js/150x150?theme=zond5&text=Guide to MUN" style="width:150px; height:auto"></object> 

这里是我的zond.fonts.css：

@font-face { 
    font-family:'wf_segoe-ui_normal'; 
    src:url('segoe-ui-west-european-normal.eot'); 
    src:url('segoe-ui-west-european-normal.eot?#iefix') format('embedded-opentype'), 
     url('segoe-ui-west-european-normal.woff') format('woff'), 
     url('segoe-ui-west-european-normal.ttf') format('truetype'), 
     url('segoe-ui-west-european-normal.svg#web') format('svg'); 
    font-weight:normal; 
    font-style:normal 
} 

这里是我的holder.themes.old.js：

Holder.addTheme("zond5", { 
    foreground: "#333", 
    background: "#f8ff62", 
    size: 16, 
    font: "wf_segoe-ui_normal", 
    fontweight: "normal" 
}); 

应该在哪里的问题呢？我猜测它与CSS字体有关？如果我已经包含所有可能的字体类型，是否应该是一个问题？

Answer 1

您需要设置正确的CORS标题，因为字体是在本地加载的。见https://gist.github.com/atiw003/1131897

摘录的Apache：

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

片段为nginx的：

location ~* \.(eot|ttf|woff)$ { 
    add_header Access-Control-Allow-Origin *; 
}