如何在CSS中指定字体大小，以便它们匹配模型并允许调整大小？

我们正在运行到我们如何指定的字体大小的问题。如果我们使用pt指定字体大小，它们在浏览器/平台上并不总是相同的。如果我们使用px指定字体大小，则IE6用户无法调整文本大小。如何在CSS中指定字体大小，以便它们匹配模型并允许调整大小？

2008-10-17 ScottKoon

An article on A List Apart（2007年11月），在各种浏览器探讨了这一深度，并得出结论：

浆纱文字和EMS行高，与人体中指定的百分比（和Safari浏览器2可选的警告）被证明能够在当今所有常用浏览器中提供准确，可调整大小的文本。这是一种技巧，您可以将它放入工具包中，并将其用作用于CSS大小的最佳实践，以满足设计师和读者的需求。

他们提供screen shots该技术在大多数流行的浏览器中的样子。以下是他们使用的代码：

<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

价值观为‘行高’特性并不需要指定一个单位。行高已经相对于字体大小，所以无单位的行高与ems中指定的相同。所以'line-height：1.125em''与'line-height：1.125'相同 – 2009-02-27 17:55:43

你应该总是使用相对单位的字体大小，如他们。

来源

2008-10-17 17:48:34

http://developer.yahoo.com/yui/fonts/#fontsize（编辑：我相信这是假定其基CSS，但它是假设的13像素的基大小;我相信甚至IE适当调整大小，其中百分比是针对一个像素尺寸测量百分比尺寸的文本）

也就是说，如果您尝试匹配图形模型，但即使只是浏览器到浏览器，文本渲染中的东西也会有所不同，您将永远无法获得像素完美的字体大小，如果您想要匹配图形模型，则可以使用，尤其是。

来源

2008-10-17 17:50:10 eyelidlessness

除非您使用px，否则您总是会遇到匹配模型的麻烦。 http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
我不觉得有什么特别的错误使用像素为您的网页。特别是因为几乎所有的现代浏览器（除webkit外）都使用缩放而不是默认的文本大小调整。

我还是会坚持到什么弥敦道建议，因为它可以让你更多的设计灵活性，因为你可以快速改变仅其中一个缩放整个网站的字体大小。但是，如果你很懒，或者想要真正发现，那么你不必担心px。

来源

2008-10-17 22:52:31

相反的是别人已经回答了，你永远也不会使用的字体大小的像素。 Internet Explorer 6仍然有一大块浏览器市场派，它绝对不会调整用像素大小指定的文本（如问题中提到的那样）。你应该总是努力使用“em”。

我使用了一种类似于其他人所建议的技术，通过这种技术我可以“重置”CSS中的所有样式，以消除任何浏览器与字体大小和位置不一致的问题。我喜欢eric meyer's reset reloaded款式作为基地。如果你想挖掘整个图书馆，你也可以使用yahoo reset css方法。

接下来，我用owen briggs' sane css typography template。您可能会注意到它自2003年以来没有更新过，但在今天的浏览器中仍然绝对可靠。

一旦你得到这个基地，这是一个简单的事情，改变<body>标签上的字体百分比，可以轻松地按照相同的方式在网站上缩放所有字体。

的不耐烦，这里是Eric Meyer的重置CSS和欧文布里格斯排版CSS一起捣碎（通过this excellent css formatter解析）：

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中指定字体大小，以便它们匹配模型并允许调整大小？

回答

相关问题