내 `` 요소가 상위 요소의 글꼴 스타일을 상속하지 않는 이유는 무엇입니까?

글꼴 상속

CSS에서 요소는 와 같은 상위 요소의 글꼴 속성을 상속합니다. 요소. 그러나 요소가 항상 이 규칙을 따르는 것은 아닙니다.

제공된 예에서 및 <라벨> 요소는 Verdana 글꼴을 공유하지만 요소는 "MS Shell Dlg"로 표시됩니다. 이는 을 포함한 양식 요소에 상속된 글꼴 속성을 재정의하는 기본 글꼴 설정이 있기 때문입니다.

기본 글꼴 재정의

일관적인 글꼴 상속을 보장하려면 모든 요소의 경우 양식 요소의 기본 글꼴 설정을 명시적으로 재정의해야 합니다. 이는 다음 CSS 규칙을 추가하여 달성할 수 있습니다.

<code class="css">input, select, textarea, button {
  font-family: inherit;
}</code>

이 규칙을 추가하면 모든 양식 요소는 element.

데모

솔루션의 라이브 데모는 http://jsfiddle.net/gaby/pEedc/1/에서 볼 수 있습니다. 이 데모에서는 및 <입력> 요소는 예상대로 Verdana 글꼴을 표시합니다.

참고:

이 솔루션은 대부분의 최신 브라우저에서 작동하지만 Internet Explorer 9 이하에서는 양식에 대한 글꼴 상속을 지원하지 않습니다. 강요. 이러한 브라우저에서는 기본 글꼴 설정이 상속된 글꼴 속성보다 우선 적용됩니다.

위 내용은 내 `` 요소가 상위 요소의 글꼴 스타일을 상속하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!