[html] CSS로 전체 웹 사이트에 단일 글꼴 적용

Program / 글쓴이

전체 웹 사이트에서 “Algerian”이라는 단일 글꼴을 사용하고 싶습니다. 따라서 모든 HTML 태그를 변경해야하며 다음과 같은 다른 태그에 대해 다른 코드를 작성하고 싶지 않습니다.

button{font-family:Algerian;}
div{font-family:Algerian;}

아래에 기록 된 방법도 권장되지 않습니다.

div,button,span,strong{font-family:Algerian;}

답변

선택기에 font-family선언을 넣으십시오 body.

body {
  font-family: Algerian;
}

페이지의 모든 요소는이 글꼴 모음을 상속합니다 (물론 나중에 재정의하지 않는 한).

답변

*{font-family:Algerian;}

CSS로 전체 웹 사이트에 단일 글꼴 적용 아래 더 나은 솔루션

답변

범용 선택기 *는 모든 요소를 ​​참조하며,이 CSS가 자동으로 수행합니다.

*{
  font-family:Algerian;
}

그러나 불행히도 FontAwesome 아이콘 또는 자체 글꼴 패밀리가 필요한 아이콘을 사용하는 경우 아이콘이 파괴되고 필요한보기가 표시되지 않습니다.

이를 방지하기 위해 :not선택기를 사용할 수 있습니다. fontawesome 아이콘의 샘플은입니다 <i class="fa fa-bluetooth"></i>.

*:not(i){
  font-family:Algerian;
}

이렇게하면이 패밀리가 name 태그가있는 요소를 제외한 문서의 모든 요소에 적용됩니다 <i>. 클래스에 대해서도 수행 할 수 있습니다.

*:not(.fa){
  font-family:Algerian;
}

이렇게하면 fontawesome 기본 클래스를 참조하는 “fa”클래스가있는 요소를 제외하고 문서의 모든 요소에이 패밀리가 적용됩니다. 다음과 같이 둘 이상의 클래스를 대상으로 지정할 수도 있습니다.

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}

답변

범용 선택기와 함께 중요 *를 사용하여 모바일 장치가 기본 글꼴로 글꼴을 변경하지 않도록합니다.

* { font-family: Algerian !important;}

답변

* { font-family: Algerian; }

범용 선택기 *는 모든 요소를 ​​참조합니다.

답변

양식 요소에 대해 다른 글꼴이 이미 브라우저에 의해 정의되었을 가능성이 있으므로 다음과 같은 두 가지 방법으로 모든 곳에서이 글꼴을 사용할 수 있습니다.

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

pre / code, kbd 등과 같은 요소에는 여전히 고정 폭 글꼴이 있지만 이러한 요소를 사용하는 경우에는 고정 폭 글꼴을 사용하는 것이 좋습니다.

중요 참고 : OS에이 글꼴을 설치 한 사람이 거의없는 경우 목록의 두 번째 글꼴이 사용됩니다. 여기에서 두 번째 글꼴을 정의하지 않았으므로 기본 serif 글꼴이 사용되며 Linux를 제외하고 Times, Times New Roman이됩니다.
두 가지 옵션 : 글꼴이 다운로드 가능한 글꼴로 사용되지 않는 경우 @ font-face 사용 또는 대체 글꼴 추가 : 두 번째, 세 번째 등 마지막으로 기본 패밀리 (sans-serif, 필기체 (*), 고정 폭) 또는 serif). 사용자의 OS에있는 첫 번째 목록이 사용됩니다.

(*) Windows의 기본 필기체는 Comic Sans입니다. Windows 사용자를 트롤링하려는 경우를 제외하고는 그렇게하지 마십시오. :)이 글꼴은 환영받는 자녀의 생일을 제외하고는 끔찍합니다.

답변

“본문”에 1과 동일한 글꼴을 사용해야하는 경우 페이지 헤드에 다음을 배치하십시오.

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

태그 사이에있는 모든 <body>과 </body>같은 글꼴이됩니다