CSS에서 글꼴 크기를 어떻게 지정하여 모형을 일치시키고 크기 조정을 허용합니까?

StackOverflow https://stackoverflow.com/questions/213128

  •  03-07-2019
  •  | 
  •  

문제

우리는 글꼴 크기를 지정하는 방법에 대한 문제가 발생합니다. PT를 사용하여 글꼴 크기를 지정하면 브라우저/플랫폼에서 항상 동일하게 보이지는 않습니다. PX를 사용하여 글꼴 크기를 지정하면 IE6 사용자는 텍스트를 크기로 조정할 수 없습니다.

도움이 되었습니까?

해결책

목록에있는 기사 (2007 년 11 월)은 다양한 브라우저 에서이 깊이를 탐색하고 다음과 같이 결론을 내 렸습니다.

신체에 비율이 지정된 비율 (및 Safari 2의 선택적 경고)이있는 EMS의 크기 크기 텍스트 및 라인 높이는 오늘날 공통적 인 모든 브라우저에서 정확하고 재개 가능한 텍스트를 제공하는 것으로 나타났습니다. 이것은 키트 백을 넣고 디자이너와 독자 모두를 만족시키는 CSS의 크기 조정 텍스트에 대한 모범 사례로 사용할 수있는 기술입니다.

그들은 제공했습니다 스크린 샷 이 기술이 가장 인기있는 브라우저에서 어떻게 보이는지에 대해. 그들이 사용한 코드는 다음과 같습니다.

<style type="text/css">`
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->

다른 팁

다른 사람들이 대답 한 것과는 달리 글꼴 크기에 픽셀을 사용해서는 안됩니다. Internet Explorer 6에는 여전히 브라우저 마켓 파이의 큰 부분이 있으며 픽셀 크기 (질문에 언급 된 바와 같이)로 지정된 텍스트를 절대로 조정하지 않습니다. 항상 "em"을 사용하려고 노력해야합니다.

나는 다른 사람들이 여기에서 제안한 것과 유사한 기술을 사용하여 전반적으로 CSS 스타일을 "재설정"하여 글꼴 크기 및 포지셔닝으로 브라우저 불일치를 제거합니다. 좋아요 Eric Meyer의 재설정 재 장전 기본으로서의 스타일. 당신은 또한 사용할 수 있습니다 야후 재설정 CS 방법 전체 라이브러리를 파고 싶다면.

다음으로 사용합니다 Owen Briggs의 Sane CSS 타이포그래피 템플릿. 2003 년 이후 업데이트되지 않았지만 오늘날의 브라우저로 여전히 확실합니다.

이 기지를 얻으면 글꼴 백분율을 변경하는 간단한 문제입니다. <body> 웹 사이트의 모든 글꼴을 동일한 방식으로 쉽게 확장 할 수있는 태그.

참을성이 없어도 Eric Meyer의 재설정 CSS와 Owen Briggs의 타이포그래피 CSS가 함께 뭉친다. 이 우수한 CSS 포맷터):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}

EM과 같은 글꼴 크기에 항상 상대 단위를 사용해야합니다.

http://developer.yahoo.com/yui/fonts/#fontsize (편집 : 나는 이것이 그들의 기본 CSS를 가정하지만, 기본 크기 13px를 가정하고있다. 나는 심지어 퍼센트가 PX 크기에 대해 측정되는 퍼센트 크기의 텍스트를 올바르게 크게 크게 크게 믿고있다.)

즉, 당신은 결코 픽셀-완벽한 글꼴 크기를 얻지 못할 것입니다. 특히 그래픽 모형을 일치 시키려고하지만 브라우저 만 브라우저에 일치하는 경우 텍스트 렌더링이 다릅니다.

PX를 사용하지 않는 한 항상 모형 일치하는 데 어려움을 겪게됩니다.http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
웹 페이지에 PX를 사용하는 데 특히 문제가 있다고 생각하지 않습니다. 특히 WebKit의 경우 거의 모든 최신 브라우저가 기본적으로 텍스트 저지 대신 확대 / 축소를 사용하기 때문입니다.

나는 여전히 Nathan이 더 많은 디자인 민첩성을 허용하기 때문에 Nathan이 제안한 것을 고수 할 수 있습니다. 하나만 변경하여 전체 사이트의 글꼴 크기를 빠르게 확장 할 수 있습니다. 그러나 당신이 게으르거나 정말로 스팟 온을 원한다면, 당신은 px를 두려워 할 필요가 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top