HTML 웹 페이지의 모든 요소에 대한 글꼴 속성을 지정하는 방법은 무엇입니까?

127

글꼴 군, 글꼴 크기, 색상 등을 설정할 때 일부 중첩 요소가 추악한 브라우저 기본값으로이를 재정의하는 것 같습니다.

실제로 내 페이지의 모든 요소에 대해 수십 번 지정해야합니까? 아니면 전체적으로 한 번에 영원히 설정할 수있는 방법이 있습니까?

그렇게하는 방법?

css

— 자랑스러운 회원
소스

1

현재 글꼴 군, 크기를 정확히 어떻게 설정하고 있습니까?

— thecoop

251

* {
 font-size: 100%;
 font-family: Arial;
}

별표는 모든 요소를 의미합니다.

— Bazzz
소스

15

이것은 작동하지만 최선의 해결책은 아닙니다. 브라우저에 '*'가 표시되면 페이지의 모든 HTML 요소를 반복하고 CSS를 적용합니다. 규칙이 의미가없는 요소에 대해서도 마찬가지입니다. HTML의 크기에 따라 페이지 렌더링이 느려질 수 있습니다.

— Cesar Canassa 2010 년

4

동의하지만 BugAlert가 요청한대로 모든 요소에 CSS를 적용합니다. 모든 요소에 영향을 미치고 싶다면 성능이 약간 떨어질 것으로 기대할 수 있습니다. :)

— Bazzz

1

또한 각 스타일 선언 끝에! important를 추가하여이 선언보다 더 큰 다른 스타일 선언에 대해 안전 할 수 있습니다.

— S ..

4

5 년 이 지났다 는 것을 알고 있지만 지금까지 아무도 눈치 채지 못한 것이 놀랍습니다. "font-family"에서 Windows 글꼴 만 지정 해서는 안됩니다 (물론 웹 글꼴이 아닌 경우)-Arial, helvetica, sans-serif가 더 많습니다. 호환됩니다.

— rob74 apr

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}글꼴의 상속, 그리고 오버라이드 사용을 정말로 피하려면 : *,:before,:after{font-family:inherit;}범용 선택기를 사용해야하는 경우 대신 상속을 사용하십시오.

— darcher 2015-06-05

18

IE를 사용하는 경우 테이블과 같은 특정 요소에 대해 브라우저 기본값으로 되돌아 갈 가능성이 있습니다. 다음 CSS와 같은 방법으로 대응할 수 있습니다.

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

편집 : CSS 재설정에 대해 읽을 수 있습니다. 같은 스레드를 볼 이 하나

— 폴
소스

10

이 조언을 충분히 강조 할 수는 없습니다. 재설정 스타일 시트를 사용하고 모든 것을 명시 적으로 설정하십시오. 브라우저 간 CSS 개발 시간을 절반으로 줄일 수 있습니다.

Eric Meyer의 reset.css를 사용해보십시오 .

— 크리스 콕스
소스

이 reset.css를 사용하려면 스타일 시트를 내 페이지에 연결해야합니까, 아니면 조정해야합니까? 기본적으로 모든 주요 브라우저에서 동일한 글꼴 패밀리와 크기를 가져야합니다. reset.css가 기본적으로 그렇게하는 데 도움이됩니까?

— Darth Coder 2014 년

1

스타일 시트를 개별적으로 연결하지 않고 복사하여 붙여 넣는 경향이있어 HTTP 요청을 저장합니다. 모든 것을 0으로 만들기 때문에 브라우저에서 일관된 스타일을 설정하는 데 도움이됩니다. 유일한 스타일은 작성하는 스타일입니다.

— Chris Cox

감사! 나는 그것을 시도했고 대부분의 문제를 해결했습니다. 그러나 스타일 시트의 사양이 동일 함에도 불구하고 Chrome과 Firefox의 글꼴 크기는 여전히 차이가 있습니다. 이것에 대한 아이디어가 있습니까? 또한 이것은 좋은 습관입니까?

— Darth Coder 2014 년

8

body 태그에서 설정할 수 있습니다.

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
소스

13

대부분의 브라우저는 일부 요소에이 글꼴을 적용하지 않습니다 (요소가 글꼴 스타일을 상속하지 않을 것이다) 때문이 정확하지

— 트래비스 - 146

@ travis-146 어떤 브라우저? 어떤 요소? 모든 브라우저가 따라야하는 사양이 있다는 것을 알고 있습니다.

— Bamieh

@Bamieh Chrome 72의 특정 예 (실제로 여기에 있음)는 버튼 또는 선택 메뉴 내의 텍스트에 글꼴을 적용하지 않는다는 것입니다.

— Nick Silvestri

2

body요소에 CSS 속성을 지정하는 경우 <body></body>나중에 스타일 시트에서이를 재정의하지 않는 한 모든 요소에 적용되어야합니다 .

— 타일러 치료
소스

0

본문에있는 모든 요소의 스타일을 설정하려면 다음 코드를 사용해야합니다 ^

  body{
    color: green;
    }

— 스테판 포 페레 치니
소스