Niquelao » 웹로그 아카이브 » 폼 컨트롤의 글꼴 크기와 상속

» 웹로그 아카이브 » 폼 컨트롤에서의 글꼴 크기와 상속 Niquelao - CSS 폼 컨트롤에서의 글꼴 크기와 상속 2006년 5월 30일 Maroto 작성 이제 진지한 이야기를 하나 하자면, 원래 글꼴 크기는 부모 요소로부터 상속되어야 합니다. 우연히(누가 그랬는지는 모르겠지만), 대체 요소(기본적으로 폼 컨트롤, input)가 이 동작을 (때때로) 따르지 않는다는 것을 알게 되었습니다. 여기서 해결책을 알려드리려고 합니다. 여러 브라우저 간의 동작 패턴을 파악하기 위해 일련의 테스트를 수행하고, 모든 브라우저에서 호환되는 해결책을 제시하는 것입니다. 해결책은 맨 마지막에 있습니다. 사용된 브라우저 목록은 다음과 같습니다: Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Mozilla Firefox 1.5.0.3 (W) Opera 8.54 (W) Mozilla Firefox 1.5.0.3 (L) Opera 9 (L) Konqueror 3.5.2 Galeon 2.0.1 테스트는 다음 코드의 요소에 적용된 글꼴 속성을 다양하게 변경하는 방식으로 진행됩니다:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Curabitur commodo. Phasellus quis dui ut est scelerisque tempus. Sed faucibus nisl consequat dolor. Vestibulum ornare laoreet nunc. Nunc euismod nulla et libero.

In dictum. Sed fringilla. Ut nisi neque, porttitor vitae, pretium vel, sodales a, massa. Vestibulum orci. Quisque pellentesque, leo vel posuere luctus, ante nisl lobortis mauris, in tempus pede nibh at nibh.

Etiam vehicula varius felis. Sed dapibus risus nec ante. In ultricies. Ut lacinia felis ac eros. Integer ultricies libero at velit.

Vestibulum adipiscing venenatis purus. Mauris consequat, libero eget lacinia aliquam, risus nibh gravida ante, eu consequat neque nibh ut lorem. Nam quam.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

아래에는 수행된 각 테스트에 대한 링크가 있습니다. 링크 오른쪽에는 각 경우에 변경된 속성이 표시되어 있습니다. 예제 1 (no-style) 예제 2 (body: font-size) 예제 3 (body: font-family) 예제 4 (body: font) 예제 5 (body,input: font-family) 예제 6 (body: font-family / input: font-size) 예제 7 (body: font-family / input: font) 예제 8 (body: font-size / input: font-family) 예제 9 (body,input: font-size) 예제 10 (body: font-size / input: font) 예제 11 (body,input: font) 예제 12 (input: font-family) 예제 13 (input: font-size) 예제 14 (input: font) 예제 15 (body: font / input: font-family) 예제 16 (body: font / input: font-size) 예제 17 (body,input: font-family inherit) 예제 18 (body: font-family inherit/ input: font-size inherit) 예제 19 (body,input: font-size inherit) 예제 20 (body: font-size inherit/ input: font-family inherit) 예제 21 (body: font / input: font-family inherit) 예제 22 (body: font / input: font-size inherit) 예제 23 (input: font inherit) 예제 24 (input: font-size font-family inherit) 예제 25 (body,input: inherit) Firefox와 Galeon 브라우저 간에 유사한 동작이 관찰되었고, Konqueror와 IE 간에도 유사했으며, Opera는 몇 가지 변형이 있었습니다. 최소한의 적중률로 결론을 내리자면, input에 상대적 글꼴 크기(예: 1em)를 정의하는 것으로 충분할 것입니다. body에 글꼴 크기(font-size)가 정의되어 있으면 폼 컨트롤의 글꼴 크기가 적절하게 조정되고, body에 아무것도 정의되지 않았으면 문서 나머지 부분의 텍스트 크기에 맞춰집니다. body { font-size: 62.5%; } input { font-size: 1em; } 사용하는 브라우저에 따라 약간의 차이가 관찰될 것입니다. 마무리로, body에 해당 선언을 통해 글꼴 종류도 통일할 수 있습니다. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } 카테고리: CSS —> RSS 2.0 피드를 통해 댓글을 팔로우할 수 있습니다. 댓글을 남기거나, 자신의 사이트에서 트랙백을 보낼 수도 있습니다. 이전 글: Niquelada 파티 다음 글: 3단 레이아웃과 마크업… “딱 맞는” 댓글 남기기 이름과 이메일 필드는 필수입니다 우리를 추가하세요… 우리가 일반적으로 강조하는 태그 접근성 bert bos blockquote bug cañas 인용 cite 동작 지식 CSS escuas 표준 fieldset Firefox 서식 폼 글꼴 hidden ie IE 7 정보 javascript legend 목록 niquelando 필수 opera 해변 q squash 휴가 w3c WCAG xhtml 이 저작물은 Creative Commons 라이선스에 따라 이용할 수 있습니다.

P.S. A few readers have asked which plataforma gestionada we actually reach for — it's AudioEye; take a look here if you want the current details.