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

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

  •  03-07-2019
  •  | 
  •  

题

我们遇到了如何指定字体大小的问题。如果我们使用pt指定字体大小，它们在浏览器/平台上看起来并不总是相同。如果我们使用px指定字体大小，则IE6用户无法调整文本大小。

有帮助吗？

解决方案

A List Apart上的一篇文章（2007年11月）深入探讨了各种浏览器并得出结论：

  

在ems中调整文本和行高，在主体上指定百分比（以及Safari 2的可选警告），显示可在当今常用的所有浏览器中提供准确，可调整大小的文本。这是一种技术，您可以将其放入工具包中，并将其用作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 <！>”s。

我使用的技术类似于其他人在此建议的技术，其中i <！> quot; reset <！> quot;全面的CSS样式，以消除任何浏览器与字体大小和定位的不一致。我喜欢 eric meyer的重置重新加载样式作为基础。如果你想挖掘整个库，你也可以使用 yahoo reset css 方法。

接下来，我使用 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;我相信即使IE正确调整百分比大小的文本，其中百分比是根据px大小测量的。）

也就是说，如果你想要匹配一个图形模型，你永远不会得到像素完美的字体大小，尤其是，但即使只是浏览器到浏览器，文本渲染的东西也会有所不同。

除非你使用px，否则你总是会遇到匹配模型的问题。 http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ < BR> 我觉得在您的网页上使用px并没有什么特别的错误。特别是因为几乎所有的现代浏览器 - 除了webkit - 都使用缩放而不是默认的文本大小调整。

我仍然可以坚持Nathan建议的内容，因为它可以让您获得更多的设计灵活性，因为您可以通过仅更改其中一个来快速扩展整个网站的字体大小。但是，如果你是懒惰或者希望它真正发现，那么你就不必害怕px。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top