크기가 일치하여 크기를 조정할 수 있도록 CSS에서 글꼴 크기를 어떻게 지정합니까?

글꼴 크기를 지정하는 방법에 문제가 있습니다. pt를 사용하여 글꼴 크기를 지정하면 항상 브라우저/플랫폼에서 동일하게 보이지는 않습니다. px를 사용하여 글꼴 크기를 지정하면 IE6 사용자는 텍스트의 크기를 조정할 수 없습니다.크기가 일치하여 크기를 조정할 수 있도록 CSS에서 글꼴 크기를 어떻게 지정합니까?

출처

2008-10-17 ScottKoon

An article on A List Apart (2007 년 11 월) 다양한 브라우저에서 깊이이 문제를 탐구하고 결론을 내렸다

몸에 지정된 비율 (사파리 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]-->

출처

2008-10-17 18:52:45

값 (this excellent css formatter을 통해 구문 분석) 함께 활판 인쇄 CSS를 으깬 '에릭 마이어의 리셋 CSS와 오웬 브릭스입니다. 선 높이는 이미 font-size에 상대적이므로 단위없는 선 높이는 ems에 지정된 것과 같습니다. 그래서 'line-height : 1.125em;' 'line-height : 1.125;'와 동일합니다. –

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

출처

2008-10-17 17:48:34

http://developer.yahoo.com/yui/fonts/#fontsize (편집 :. 나는이 자신의 기본 CSS를 가정 생각하지만, 13px의 기본 크기를 가정 한 것입니다, 나는 심지어 IE가 제대로 퍼센트는 픽셀 크기에 대해 측정 퍼센트 크기의 텍스트 크기를 조절 믿는다)

그래픽 실물 크기와 일치 시키려고한다면 픽셀 완전 글꼴 크기 조정 특히을 얻을 수는 없지만 브라우저와 브라우저 만 일치 시키면 텍스트 렌더링이 달라집니다.

출처

2008-10-17 17:50:10 eyelidlessness

px를 사용하지 않는 한 항상 상상의 일치 문제가 있습니다. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
웹 페이지에 px를 사용할 때 특히 잘못된 점이 없습니다. 특히 웹킷 용으로 저장되는 거의 모든 최신 브라우저는 기본적으로 텍스트 크기 조정과 달리 확대/축소를 사용합니다.

Nathan이 제안한 내용에 여전히 충실 할 수 있습니다. 그 중 하나만 변경하여 전체 사이트의 글꼴 크기를 빠르게 조정할 수 있으므로 디자인 민첩성이 향상되었습니다. 그러나 게으르거나 실제로 자리 잡기를 원할 경우 px를 두려워 할 필요가 없습니다.

출처

2008-10-17 22:52:31

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

저는 다른 사람들이 여기에서 제안한 것과 비슷한 기술을 사용하여 글꼴 크기 조정 및 위치 지정을 통해 모든 브라우저 불일치를 제거하기 위해 CSS 스타일을 보드 전체에서 "재설정"합니다. 나는 eric meyer's reset reloaded 스타일을 기본으로 좋아합니다. 전체 라이브러리를 파고 싶다면 yahoo reset css 메소드를 사용할 수도 있습니다.

다음으로는 owen briggs' sane css typography template을 사용합니다. 2003 년 이래로 업데이트되지 않았지만 오늘날의 브라우저에서는 여전히 견고하다는 것을 알 수 있습니다.

일단이 자료를 얻으면 <body> 태그의 글꼴 비율을 변경하여 동일한 방식으로 웹 사이트의 모든 글꼴을 쉽게 조정할 수 있습니다.지정된 장치가 필요하지 않습니다 라인 높이 '속성 : 참을성에 대한

, 여기'를위한

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;}

출처

2008-10-18 08:41:48 cowgod

크기가 일치하여 크기를 조정할 수 있도록 CSS에서 글꼴 크기를 어떻게 지정합니까?

답변

관련 문제