在整個網頁上將Arial更改爲其他字體

我正在考慮一個腳本，它可以將網頁的字體外觀從Arial更改爲我選擇的其他字體。在整個網頁上將Arial更改爲其他字體

我應該怎麼做呢？

我的理解：* { font-family: "SomeFont"; }

但這不會實現這一目標僅定位宋體文本。

我可以使用jQuery或Javascript，無論哪個更有效和快速。

編輯：似乎人們很難理解這個問題。所以，我要解釋一些更多的，我只是想宋體文字在網頁上，如果它存在，在外觀上改變。

來源

2013-05-04 Jonathan McIntyre

jQuery === Javascript – Andreas 2013-05-04 08:07:58

這是幹什麼用的？你知道，'Arial'可能甚至在用戶的系統中不可用... – elclanrs 2013-05-04 08:08:30

@Andreas'$（this）'！= JavaScript;） – 2013-05-04 08:12:31

我打算建議循環訪問styleSheets數組，並且對於每個樣式表，循環遍歷規則，找到定義Arial作爲字體的那些，然後將其更改爲所需的其他字體。這樣你就不必訪問頁面上的每個元素。

但是，該建議的問題是元素上的內聯樣式。

所以我不想說，要做到這一點，你必須訪問頁面上的每一個元素。對於大多數網頁來說，這不會成爲問題，但是你的里程可能會有所不同。

這裏是你如何用jQuery做到這一點：

$("*").each(function() { 
    var $this = $(this); 
    if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) { 
     $this.css("font-family", "SomeOtherFont"); 
    } 
});

不能說我喜歡它，雖然。 :-)你能避免建立大規模列表（$("*")生成包含頁面元素全部一個jQuery對象，這是相當大的），在一開始，如果你做一個遞歸步行代替，例如：

$(document.body).children().each(updateFont); 
function updateFont() { 
    var $this = $(this); 
    if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) { 
     $this.css("font-family", "SomeOtherFont"); 
    } 
    $this.children().each(updateFont); 
}

這可能是更可取的，你必須對其進行分析。

而不的jQuery否則它會涉及通過每個元件的childNodes遞歸循環，並使用任一getComputedStyle（大多數瀏覽器）或currentStyle（IE）來獲取的字體信息，然後（如果必要的話）分配給element.style.fontFamily。

實際上，「兩者」和「解決方案可能是最好的。首先，更新樣式表，然後遍歷樹來捕獲任何內聯樣式。這樣，大概你會通過改變樣式表來獲得大部分的樣式表，避免了零碎更新的醜陋。另外，您不必使用css()（jQuery）或getComputedStyle/currentStyle（不含jQuery），您只需檢查element.style.fontFamily，因此效率更高。

請注意，IE的樣式表對象使用一個名爲rules的數組，但其他人使用cssRules，但除此之外它們在很大程度上是相同的。

來源

2013-05-04 08:22:14

我同意不喜歡，我寧願替換樣式表中的字體。這個和其他的解決方案將導致一個醜陋的字體替換生活頁 – 2013-05-04 08:26:30

是的，我明白你的觀點。這似乎是唯一的方法。我會在接下來的5分鐘內將此標記爲正確的答案。如果其他人不能提出一些好的東西。 – 2013-05-04 08:26:50

@JonathanMcIntyre theres沒有像海量樣式替換這樣的好東西AFAIK – 2013-05-04 08:28:11

可以使用@ font-face僅更改Arial。

首先鏈接到一個CSS：

<link rel="stylesheet" href="/css/fonts/luxi-Sans-fontfacekit/stylesheet.css" type="text/css" charset="utf-8" />

然後在你的CSS細化宋體是什麼：

@font-face { 
    font-family: 'Arial'; 
    src: url('luxisr-webfont.eot'); 
    src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'), 
     url('luxisr-webfont.woff') format('woff'), 
     url('luxisr-webfont.ttf') format('truetype'), 
     url('luxisr-webfont.svg#LuxiSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 


@font-face { 
    font-family: 'Arial'; 
    src: url('luxisb-webfont.eot'); 
    src: url('luxisb-webfont.eot?#iefix') format('embedded-opentype'), 
     url('luxisb-webfont.woff') format('woff'), 
     url('luxisb-webfont.ttf') format('truetype'), 
     url('luxisb-webfont.svg#LuxiSansBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
}

只有宋體改變（在我的例子，以魯西三世）。所有其他字體仍然如常。

來源

2013-05-05 05:31:50

在整個網頁上將Arial更改爲其他字體

回答

相關問題