<textarea>와 <textfield>가 body에서 font-family와 font-size를 가져 오지 않는 이유는 무엇입니까?

118

왜 Textarea하고 textfield있지 복용 font-family하고 font-size몸에서?

여기 http://jsbin.com/ucano4 라이브 예제를 참조하십시오

암호

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>texearea font</title>
        <style type="text/css">
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size:16px
        }
        </style>
        </head>            
        <body>
        <form action="" method="get">
        <textarea name="" cols="20" rows="4"></textarea>
        <input name="" type="text" />
        </form>
        <p>some text here</p>
        </body>
        </html>

그것이 일반적인 행동이라면 다음과 같이 CSS로 작성해야합니다. 나는 모두 같은 스타일이 필요해

body,textarea,input  {
                font-family: Verdana, Geneva, sans-serif;
                font-size:16px
            }

그리고 글꼴 스타일을 가져 오지 않는 XHTML의 다른 요소는 몇 개 body {....}입니까?

css xhtml

— 지텐 드라 비야 스
소스

76

기본적으로 브라우저는 OS 컨트롤 또는 브라우저 컨트롤을 사용하여 대부분의 양식 요소 (텍스트 영역, 텍스트 상자, 버튼 등)를 렌더링합니다. 따라서 대부분의 글꼴 속성은 OS가 현재 사용중인 테마에서 가져옵니다.

글꼴 / 텍스트 스타일을 변경하려면 양식 요소 자체를 대상으로 지정해야합니다. 방금 수행 한 것처럼 쉽게 선택하면됩니다.

내가 아는 한 양식 요소 만 영향을받습니다. 내 머리 위로 떨어져 : input, button, textarea, select.

— BoltClock
소스

32

이 동작이 바람직하지 않은 경우 가장 직접적인 해결책은 스타일에 추가하는 것 textarea, input, button, select { font-family: inherit; font-size: inherit; }입니다.

— Devvyn

@Devvyn, text-align: inherit버튼의 텍스트가 종종 중앙에 정렬되기 때문에 추가해야합니다 .

— Joshua Muheim의

반대로 전체 웹 페이지 / 본문에 해당 OS 글꼴을 사용하려면 어떻게해야합니까?

— agirault

@agirault 다음과 같이 할 수 있습니다. body {font-family : BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans ","Helvetica Neue ","Helvetica ","Arial ", sans-serif; }

— getup8

149

특정 컨트롤은 기본적으로 글꼴 설정을 상속하지 않습니다. CSS에 다음을 배치하여이를 재정의 할 수 있습니다.

textarea {
   font-family: inherit;
   font-size: inherit;
}

— 스풀 슨
소스

4

버전 8 이전의 IE는 상속을 지원하지 않으므로 작동하지 않습니다.

— DisgruntledGoat

6

저는 이것이 모든 요소를 정의하는 크로스 브라우저 솔루션이라고 생각합니다body, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

나는 그 접근법이 더 실용적이라는 데 동의합니다. 저는 그저 inherit접근 방식 을 사용하여보고있는 동작을 보여주고 싶었습니다 .

— spoulson

불편한 크롬 (버전 59.0.3071.115)은 font-size : inherit를 적용하지 않습니다. 글꼴 패밀리를 지정하지 않고.

— Ondrej

font-weight: inherit;누락.

— .11.22

10

모든 브라우저에는 기본 스타일 시트가 내장되어 있습니다. 그렇기 때문에 스타일이 전혀 정의되지 않은 페이지를 만들면 <h1>태그가 크고 굵게 표시되고 <strong>텍스트가 굵게 표시됩니다. 마찬가지로 <input>및 <textarea>요소 의 글꼴 스타일 은 기본 스타일에서 정의됩니다.

Firefox에서이 스타일 시트를 보려면 다음을 주소 표시 줄에 입력하세요. resource://gre/res/forms.css

어쨌든, 마지막 예제에서했던 것처럼 다른 스타일과 마찬가지로 이러한 스타일을 재정의해야합니다.

다른 스타일이 정의되어 있는지 궁금하다면 리소스의 CSS 파일을 확인하세요. 위의 URL을 통해 또는 resfirefox 디렉토리 (예 :)에서 폴더를 찾아서 액세스 할 수 있습니다 c:\program files\mozilla firefox\res. 다음은 일반 페이지의 스타일에 영향을 미칠 수있는 것입니다.

html.css
forms.css
quirk.css
ua.css

— nickf
소스

하지만 <H1>에서 글꼴 스타일을 취하고 <body>있지만, <textarea>하지

— Jitendra Vyas는

3

의 스타일 h1은 글꼴을 정의하지 않으므로 body스타일이 우선합니다. 의 스타일은 스타일을 input정의하고 선택자보다 더 구체적이므로 이깁니다.

— nickf

댓글에 +1. 나는 몰랐다. 즉, 일부 요소는 브라우저에서 기본적으로 특정 스타일을 가지며 본문 {....}으로 재정의 할 수 없습니다.

— Jitendra Vyas

1

그가 의미하는 것은 일부 요소가 DOM의 다른 요소보다 더 구체적이거나 범위가 더 작다는 것입니다. 본문 내에 텍스트 영역이 존재하므로 텍스트 영역에 대해 정의 된 모든 스타일이 body {} 스타일을 덮어 씁니다. 따라서 FF의 기본 텍스트 영역 스타일은 나중에 정의 되더라도 바디 스타일을 덮어 씁니다 (보통 더 최근의 것이 우선하지만 더 넓은 범위 / 덜 구체적인 경우에는 해당되지 않음).

— user1072406
소스

0

일반 텍스트보다 훨씬 큰 글꼴을 사용하여 모바일에서 텍스트 영역을 중지하기 위해 모든 종류의 트릭을 시도했습니다. 내 텍스트 영역이 cols = "45"일 때 글꼴은 정상 이었지만 cols = "71"로 올라가 자마자 td 태그 안에 머물러 있어도 글꼴이 커졌습니다.

mozilla 페이지 ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust )에서 이것을 찾았습니다.

textarea {
   text-size-adjust: none;
}

저에게 가장 좋은 대답 인 것 같습니다. 그것은 PC, 태블릿, 그리고 가장 중요한 것은 내 안드로이드 폰에서 작동합니다.

— 브라이언 존스
소스