<input>은 <body>에서 글꼴을 상속하지 않습니다.

102

입력 및 레이블 필드가 있습니다.

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

및 CSS :

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Firefox에서 코드가 열리면 글꼴이 동일하지 않습니다. Firebug는 두 가지 모두 "상속되어야한다"는 것을 보여주고 계산을 보면 레이블이 Verdana를 사용함을 보여줍니다. 그러나 입력은 "MS Shell Dlg"를 사용함을 보여줍니다.

누구든지 무슨 일이 일어나고 있으며 왜 정상적인 CSS 규칙을 따르지 않는지 설명 할 수 있습니까?

css

— 주디 R
소스

그들이하지 않는 것은 매우 슬프다. 나는 W3C가 그들 자신의 브라우져 스타일을 강요하는 것보다 시스템의 기본값으로 스타일을 두는 것이 낫다고 결정한 것 같다

— vsync

125

기본적으로 상속되지 않지만 css로 상속하도록 설정할 수 있습니다.

input, select, textarea, button{font-family:inherit;}

데모 : http://jsfiddle.net/gaby/pEedc/1/

— 가브리엘 페트리 올리
소스

글꼴 속성 자동 상속이 언급되지 않은 경우 여기를 참조하십시오. developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho, 이것은 현재 시스템 스타일링에서 상속 된 양식 요소를 제외한 모든 요소에 적용되므로 사용자에게 친숙한 느낌을 유지 하지만 ( 기본적으로 ) 수동으로 재정의 할 수 있습니다.

— Gabriele Petrioli

1

틀 렸든 아니든, Firebug가 나에게 보여준 것은 매우 혼란 스러웠습니다 : 글꼴 크기 12이지만 계산은 여전히 13.3333이었습니다. Gaby의 대답과 유사하게 글꼴 크기를 설정 한 후 문제가 해결되었습니다. O

— Jeroen

@Gaby 디자이너가 우리 개발자를 위해 모든 생각을하는 것은 항상 너무 좋습니다 ...;)

— AGuyCalledGerald

당신이 넣어 또한 경우 input내부 label의 label태그는 없습니다 상속 기본 CSS를 않습니다

— AmerllicA

16

양식 항목 (입력 / 텍스트 영역 / 기타)은 글꼴 정보를 상속하지 않습니다. 해당 항목에 글꼴 모음을 설정해야합니다.

— 존 그린
소스

@jhon wat UR 말이 사실 일 수도 있습니다. 이에 관한 표준 / 유효한 문서가 있습니까 ??

— diEcho

글꼴 요소는 색상, 배경 등도 상속하지 않습니다. 실제로 글꼴 요소는 전체 html / css에서 가장 신뢰할 수없는 요소입니다! 입력 상자의 너비를 지정할 수 없으며 모든 브라우저에서 동일하게 보장됩니다!

— Ionuț Staicu

양식 요소를 의미합니다. 아직도 졸려 :)

— Ionuț Staicu

@diEcho-솔직히 사양을 검색했지만 아무데도 언급되지 않았습니다. '관련'을 살펴보면 중복 질문 링크가 제공됩니다. stackoverflow.com/questions/2874813 (사양 링크는 없지만 내 대답을 제공합니다). Chrome의 기본 스타일 시트는 글꼴을 "-webkit-small-control;"로 나열합니다. 즉, 이미 본문을 재정의하고 있으므로 본문에 설정된 어떤 것보다 더 구체적입니다. 내가 착각하지 않으면 TD 요소도 마찬가지입니다. 그래서 나는 "그냥 그렇게되는 것"외에는 무엇을 말해야할지 모르겠습니다. :)

— 존 그린

5

3 년 후, 나는 그것을 이상한 찾는거야 <input>유형의 요소를 reset, submit그리고 button상속하지 않습니다 font-family크롬이나 사파리에서. 나는 그들이 패딩을받지 않을 것이라는 것을 발견했습니다.

하지만 특정 속성, 등으로 혼란 할 때 background, border또는이 이상한 appearance다음 속성 font-family과 padding효과를 가지고 있지만, 버튼의 기본 모양과 느낌이 완전히 버튼을 다시 스타일에 경우 문제가되지 않습니다, 이는 손실됩니다.

상속 된 기본 모양의 버튼을 원한다면 대신 요소를 font-family사용하십시오 .<button><input>

Codepen을 참조하십시오 .

— 스타 우티
소스

1

나는 같은 문제가 있었다. 나를 위해 일한 것은 HTML의 입력 요소에 스타일을 직접 추가하는 것이 었습니다. 저는 React fyi로 코딩하고 있습니다.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

— rpd1297
소스