Holder.js 个对象上的自定义字体
Custom Font on Holder.js objects
在 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 字体有关?当我已经包含了所有可能的字体类型时,这会成为问题吗?
您需要设置正确的 CORS headers,因为字体是在本地加载的。参见 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 *;
}
在 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 字体有关?当我已经包含了所有可能的字体类型时,这会成为问题吗?
您需要设置正确的 CORS headers,因为字体是在本地加载的。参见 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 *;
}