전체 웹 페이지에서 Arial을 다른 글꼴로 변경하십시오.

Question

웹 페이지의 글꼴 모양을 Arial에서 다른 글꼴로 변경할 수있는 스크립트가 생각납니다.

어떻게해야합니까? * { font-family: "SomeFont"; }

그러나 이것은 단지 굴림 텍스트를 대상으로 목표를 달성하지 않습니다

나는 이해합니다.

더 효율적이고 빠른 jQuery 또는 Javascript를 사용할 수 있습니다.

편집 : 사람들이 질문을 이해하는 데 어려움이있는 것처럼 보입니다. 그래서가 은 외관 변경,을 존재하는 경우 몇 가지 더, 난 그냥 웹 페이지에서 굴림 텍스트, 원하는 설명 할 것이다.

Answer 1

styleSheets 배열을 통해 반복을 제안하고 각 스타일 시트에 대해 규칙을 반복하고 Arial을 정의하는 글꼴을 찾아 원하는 다른 글꼴로 변경합니다. 그렇게하면 페이지의 모든 요소를 ​​방문하지 않아도됩니다.

그러나 그 제안의 문제점은 요소의 인라인 스타일입니다.

이렇게 말하면 페이지의 모든 요소를 ​​방문해야합니다. 대부분의 페이지는 문제가되지 않지만 마일리지는 다를 수 있습니다. 여기

당신이 jQuery를 함께 할 것입니다 방법은 다음과 같습니다

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

내가 그래도 좋아 말할 수 없습니다.

$(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를 객체 상당히 클 수있다 빌드) 거대한 목록을 구축 피할 수 :-)

그럴 수도 있습니다. 프로파일 링해야합니다. jQuery를하지 않고 그 일을

는

반복적으로 element.style.fontFamily에 할당하는 각 요소의 childNodes 통해 반복하고 getComputedStyle (대부분의 브라우저)를 사용하거나 (필요한 경우) currentStyle (IE)가 다음 글꼴 정보를 얻을 포함한다.

---

사실 "모두 및"해결책이 가장 좋을 것입니다. 먼저 스타일 시트를 업데이트 한 다음 나무를 걷고 인라인 스타일을 잡습니다. 그런 식으로, 아마도 당신은 단편적인 업데이트의 추함을 피하는 스타일 시트를 변경함으로써 대부분의 것을 얻을 것입니다. 또한 css() (jQuery) 또는 getComputedStyle/currentStyle (jQuery 제외)을 사용할 필요가 없으므로 element.style.fontFamily을 확인하면 더 효율적입니다.

IE의 스타일 시트 객체는 rules이라는 배열을 사용하고 다른 배열은 cssRules을 사용하지만 다른 점은 거의 동일하다는 점을주의하십시오.

Answer 2

@ 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; 
} 

만 굴림 (루시 산세 내 예제에서) 변경됩니다. 다른 모든 글꼴은 평소대로 유지됩니다.