Question

我需要在不使用 CSS 的情况下完成网站。

一切顺利，但我不知道如何使用纯 JS 更改 font-family 。

是否有人知道如何仅使用 JS 导入字体？

谢谢！

Answer 1

你说的是“纯JS”，但很可能你是在浏览器环境中询问如何做到这一点，这会暴露Document Object Model or DOM。因此，您可以将它与Javascript一起使用。

除非这是一个技巧性的家庭作业问题，否则应该没有理由避免使用CSS，因为CSS始终可用，而且这是设计样式的合适工具。

更改元素的font-family非常简单：

element.style.fontFamily = "Arial, Sans Serif";

现在，要导入字体，只需将样式表或<style>元素添加到DOM，该DOM具有font-face规则：

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700');
document.head.appendChild(link);

There is no other way to do it currently.

Answer 2

我建议使用Google Webfontloader，它使用起来非常简单：

WebFont.load({
    google: {
        families: ['Droid Sans', 'Droid Serif']
    }
});

这将允许您使用由Google here托管的大量网络字体库，而无需明确指定CSS。如果您愿意使用样式标记或.css文件（或者您可以通过javascript注入@ font-face），也可以使用自定义字体。还有其他Web字体提供程序可以使用Webfontloader，只需查看github页面。

如果您有兴趣学习如何在javascript中手动执行此操作，那么通过javascript注入CSS的任何查询都会对您进行排序，但是，技术上仍在使用CSS。不确定这是否是你想要的。

如何用纯JS导入字体？

2 个答案: