代码之家 › 专栏 › 技术社区 › ScottKoon

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

fonts browser css

ScottKoon · 技术社区 · 16 年前

我们在如何指定字体大小方面遇到了问题。如果我们使用pt指定字体大小,那么浏览器/平台中的字体大小并不总是相同的。如果我们使用px指定字体大小,IE6用户就不能调整文本的大小。

5 回复 | 直到 16 年前

Nathan Long 16 年前

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]-->

cowgod 16 年前

与其他人的回答相反,您永远不应该使用像素作为字体大小。InternetExplorer6仍然有很大一部分浏览器市场派,它绝对不会调整指定像素大小的文本的大小(如问题中所述)。你应该一直努力使用“em”s。

我使用了一种类似于其他人在这里建议的技术,通过这种技术,我可以“重置”整个板上的CSS样式,以消除浏览器与字体大小和位置不一致的地方。我喜欢 eric meyer's reset reloaded 以样式为基础。您也可以使用 yahoo reset css 方法,如果您想深入了解整个库。

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

一旦你得到了这个基础,这是一个简单的问题改变字体百分比 <body> 标签可以很容易地以相同的方式缩放网站上的所有字体。

对于不耐烦的人来说,这里是埃里克·迈耶的重置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;}

John Topley 16 年前

字体大小应始终使用相对单位,如em。

eyelidlessness 16 年前

http://developer.yahoo.com/yui/fonts/#fontsize (编辑:我认为这假设了它们的基本CSS,但它假设了13px的基本大小;我相信甚至IE也会正确地调整百分比大小的文本,其中百分比是根据px大小测量的。)

也就是说,你永远不会得到像素完美的字体大小, 尤其地 如果您试图匹配一个图形模型,但即使只是浏览器到浏览器,在文本呈现方面也会有所不同。

Jethro Larson 16 年前

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

我仍然会坚持内森的建议,因为它可以让你更灵活地设计,因为你可以通过只更改其中一个字体来快速缩放整个网站的字体大小。但是如果你懒惰或者真的想要它出现,那么你就不必害怕px。