如何將新的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（上面的示例）