如何将新的Web字体绑定到打开的html页面？

Question

我不确定是否是发布此问题的正确地方？

今天早上我读到，新版的Chrome支持实时绑定网络字体。

是否有技巧性的javascript，dom操作，Amberjs或Jquery插件可以对尚不支持该功能的浏览器执行相同的操作（在浏览器的打开页面中添加新的Web字体并可以访问它，我的意思是不必更改CSS并重新加载页面？）

谢谢 ：）

Answer 1

尝试这个：

var newStyleText = "@font-face {" +
"font-family: myFirstFont;" +
"src: url(your-font.css);" +
"}"

var newStyle = $(document.createElement("style");
newStyle.html(newStyleText);
$(document.head).append(newStyle)

每个带有font-family: myFirstFont;元素font-family: myFirstFont; 同时使用您的字体！

Answer 2

正如@ Mohsen89z所说，您可以使用@ font-face。

引用w3schools：

Internet Explorer 9，Firefox，Opera，Chrome和Safari支持@ font-face规则。

Internet Explorer 9 +，Firefox，Chrome，Safari和Opera支持WOFF（Web开放字体格式）字体。

Firefox，Chrome，Safari和Opera也支持TTF（True Type字体）和OTF（OpenType字体）类型的字体。

Chrome，Safari和Opera也支持SVG字体/形状。

Internet Explorer还支持EOT（嵌入式OpenType）字体。

注意：Internet Explorer 8和更早版本不支持@ font-face规则。

无论如何，在IE早期版本上有一个技巧。 检查此链接 。

然后，如果要更改字体，请使用JS。 jQuery示例：

$('.myparagraph').css('font', 'normal "Your fav font", sans-serif');

为了扩展功能，建议您使用Google字体将所需的所有字体嵌入到单个标记行中，例如：

<link href='http://fonts.googleapis.com/css?family=Finger+Paint|Gloria+Hallelujah|Open+Sans' rel='stylesheet' type='text/css'>

然后，您可以直接在css .mydiv { font-family: "Open Sans", sans-serif; }使用它.mydiv { font-family: "Open Sans", sans-serif; } .mydiv { font-family: "Open Sans", sans-serif; }或js（上面的示例）