书签链接自定义字体和测试不工作

Question

我做了一个自定义字体，想在网站上测试它，所以我写了这个书签。我使用 Simple HTTP Server 应用程序在手机上托管了字体和样式表。

javascript:(function()
{ var head = document.getElementsByTagName('HEAD')[0];
var link=document.createElement('link');
link.rel = 'stylesheet';  link.href = 'http://192.???.?.????:????/elle/stylesheet.css';
link.type ='text/css';  link.charset = 'UTF-8';
head.appendChild(link);
document.body.style.fontFamily = "'elle-2aregular', sans-serif, georgia";
})()

样式表

@font-face {
font-family: 'elle-2aregular';
src:url('http://192.???.?.????:????/elle/elle.woff2') format('woff2'),
url('http://192.???.1.????:????/elle/elle.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Answer 1

原来是样式表中的字体链接被浏览器屏蔽了。我通过将字体嵌入 Base64 代码而不是链接到它们来解决这个问题。

字体和 Base64 数据 URI

谢谢@Herrstrietzel 的建议。