2

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

4

5 回答 5

2

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

以 em 为单位调整文本大小和行高，并在正文中指定百分比（以及 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]-->
于 2008-10-17T18:52:45.743 回答
2

与其他人的回答相反，您永远不应该使用像素作为字体大小。internet explorer 6 仍然在浏览器市场占有一席之地，它绝对不会调整以像素大小指定的文本大小（如问题中所述）。您应该始终努力使用“em”。

我使用与其他人在这里建议的技术类似的技术，即我“重置”全面的 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;}
于 2008-10-18T08:41:48.537 回答
1

您应该始终使用相对单位来表示字体大小，例如 em。

于 2008-10-17T17:48:34.563 回答
1

http://developer.yahoo.com/yui/fonts/#fontsize（编辑：我相信这是假设他们的基本 CSS，但它假设基本大小为 13px；我相信即使 IE 也会正确调整百分比大小的文本，其中百分比是根据 px 大小来衡量的。）

也就是说，您永远不会获得像素完美的字体大小，特别是如果您尝试匹配图形模型，但即使只是浏览器到浏览器，文本渲染也会有所不同。

于 2008-10-17T17:50:10.473 回答
1

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

我仍然可能会坚持 Nathan 的建议，因为它可以让您更灵活地设计，因为您可以通过仅更改其中一个来快速缩放整个网站的字体大小。但是，如果您很懒惰或希望它真正到位，那么您不必害怕 px。

于 2008-10-17T22:52:31.627 回答