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

92

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

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

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

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

— 미셸 스미스
소스

3

font-family는 상속 된 값이므로 본문에 정의하지 않는 이유는 무엇입니까?

Jukka K. Korpela에서 답을 선택하는 것이 좋습니다. 약 한 달 동안 현재 선택한 답변보다 빠르며 어쨌든 거의 동일한 내용을 가지고 있습니다.

— okm

전체 HTML 문서에 전역 글꼴을 적용하는 방법의

— davidcondrey

(Jan Hančič)의 대답은 변경하고 싶지 않은 태그조차도 모든 html 태그에 글꼴을 적용하기 때문에 절대 사용하지 않는 것이 좋습니다. 예를 들어 : td 태그 안에 img 태그를 만들고 text-align : center 및 vertical-align : middle로 만든 경우. 이 방법을 사용하면 img 태그가 TD의 중심이되지 않습니다. 가장 좋은 방법 : 문서를 확인하고 단지 그들에 텍스트를 가지고있는 태그에 글꼴 서식을 적용

— 마흐디 Jazini

112

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

body {
  font-family: Algerian;
}

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

— 얀 한치 치
소스

11

요소 의 글꼴 패밀리를 설정하는 스타일 시트 font-family가 없는 경우에만 요소 가 부모로부터 상속 됩니다 . 브라우저 스타일 시트는 일반적으로 적어도에 대한 글꼴 패밀리 세트 input, textarea, code, tt, 및 pre요소.

— 유카 K. 펠라

당신이 옳습니다. 너무 오래 내가 : 사물의 종류 잊지 위해 나는 CSS 재설정 작업을했습니다

— 월 Hančič

또는 더 나은 방법은 두 개의 상위 답변을 결합하는 것입니다 ... body, * {font-family : Algerian;}

— james ace

105

*{font-family:Algerian;}

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

— 살람 엘 반나
소스

3

에릭 마이어의 CSS 리셋을 사용할 때 흥미롭게도,이 작동하지 않습니다

— ianbeks

그것은 모든 단일 요소에 글꼴 패밀리를 적용하지 않습니까? 이것은 불필요한 요소 (예 : <img>)에 적용하고 비효율적 인 것처럼 보입니다. 나는 확실히 틀릴 수 있지만 모든 것에 스타일을 적용 할 때주의해서 읽었습니다.

— Max Strater 2014-06-12

범용 규칙은 재정의 할 수 없으므로 사이트에서 두 번째 글꼴을 사용할 수 없습니다.

— Julian F. Weinert 2015 년

노보이가 이것을 언급했기 때문에 범용 선택기는 느린 것으로 알려져 있습니다. : 여기에 대한 자세한 clairecodes.com/blog/...

— 테르 예 Solem

또는 더 나은 방법은 두 개의 상위 답변을 결합하는 것입니다 ... body, * {font-family : Algerian;}

— james ace

48

범용 선택기 *는 모든 요소를 참조하며,이 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;
}

— 살람 엘 반나
소스

이 답변에 의한 부트 스트랩 (glyphicons)에서 아이콘의 사용에 웹 페이지에서 스타일링의 현재 사용에 따라 더 필요한 세부 사항을 제공하고 멋진 글꼴

— 락스

참고 : (선택기가 아님)은 모든 브라우저와 호환되지 않는 CSS3입니다. IE는 9+ 우리는 IE를 떠나 -9 가족을 영원히 전 세계의 모든 사람들을 위해 최소한 10 년을 기다려야합니다 : D를 : '(

— 마흐디 Jazini

19

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

* { font-family: Algerian !important;}

— 개 비치시
소스

18

* { font-family: Algerian; }

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

— 주카 K. 코르 펠라
소스

3

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

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 사용자를 트롤링하려는 경우를 제외하고는 그렇게하지 마십시오. :)이 글꼴은 환영받는 자녀의 생일을 제외하고는 끔찍합니다.

— FelipeAls
소스

2

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

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

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

— PICwebs
소스

1

좋아, 여러 가지 옵션을 시도한이 문제가 발생했습니다.

내가 사용하는 글꼴은 Ubuntu-LI이며 작업 디렉토리에 글꼴 폴더를 만들었습니다. 폴더 글꼴 아래

나는 그것을 적용 할 수 있었다. 결국 여기에 내 작업 코드가있다.

나는 이것이 내 전체 웹 사이트에 적용되기를 원했기 때문에 CSS 문서의 맨 위에 놓았습니다. 모든 Div 태그 위에 (중요한 것은 아닙니다. 스크립트에 할당 한 개별 글꼴이 우선 적용된다는 점만 알아 두십시오)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

그런 다음 H1 태그를 모두 다른 것으로 만들고 싶다면 sans sarif라고 말하겠습니다.

h1{
   font-family: Sans-sarif;
}

어떤 경우에 내 H1 태그 만 sans-sarif 글꼴이되고 나머지 페이지는 Ubuntu-LI 글꼴이됩니다.

— 리 알더 만
소스

0

Bootstrap에서 웹 관리자는 제목이 '상속'으로 설정되어 있다고 말합니다.

내 페이지를 새 글꼴로 설정하는 데 필요한 것은

div, p {font-family: Algerian}

.scss에 있습니다.

— 오스틴
소스

-1

*{font-family:Algerian;}

이 html은 나를 위해 일했습니다. 워드 프레스의 캔버스 설정에 추가되었습니다.

멋지네요-감사합니다!

— Intelijenjah
소스