如何在网站上正确加载自定义字体

Question

我在css文件中声明自定义字体，使用@import并将其分配给元素：

我无法访问该网站的头部标签，我正在体内进行。。。

这不起作用。。，我的问题是，自定义字体必须在页面的头部声明才能加载吗？

Answer 1

使用jvascript

(function loadCss(url) {
    var link = document.createElement("link"),
        url = "App/components/core-jasmine/jasmine.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
})();

Answer 2

如果可能的话，不要对css文件使用@import（除非在某些情况下，比如对不同的设备使用@media），因为它会阻止css文件的正确加载。

您可以声明一个链接标记以在head标记之外导入CSS，但这可能会导致几个问题——主要是根据W3C规范，您应该只在head标记中声明link标记（即，它会使W3C验证器失败）。在文档正文中加载它也会增加加载时间，因为浏览器必须在加载后重新设计页面的样式。

但从理论上讲，是的，这是可以做到的。