当前位置：首页 → 问答吧 → 你们是如何对文字进行排版的？

你们是如何对文字进行排版的？

时间：2011-09-08

来源：互联网

有必要跟大家讨论制作中的问题，看看大家是如何解决这个问题的。
如下图：图1.

把图放在ps中，你该如何进行文字的排版？
1. 纯行高设置，不借助padding.
2. 行高设置成1，再借助padding

下面问题来了。不论你使用上面的哪个方案，你如何拉取参考线的？紧贴着文字的顶部吗？
图2

可是问题来了，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字大小测试</title> <style type="text/css"> body { margin:0; padding:0;font:12px/1 "宋体";width:960px;margin:10px auto; } div{margin-bottom:10px;overflow:hidden;line-height:1;} .f12{font-size:12px;} .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;} .f20{font-size:20px;} .bd1{border:1px solid red;} .bd2{border:1px solid green;} </style> </head> <body> <div class="f12 bd1">12像素的字体</div> <div class="f14 bd2">14像素的字体</div> <div class="f16 bd1">16像素的字体</div> <div class="f18 bd2">18像素的字体</div> <div class="f20 bd1">20像素的字体</div> </body> </html>
提示：您可以先修改部分代码再运行

看看谷歌浏览器中对文字高度的解释：
图3
20像素大小的文字顶部就没有和它的边框对齐，而我的代码中行高设置为了1.如果在ps中把浏览器中的截图字体量取的话，总会差一两个像素。

IE6浏览器的截图：
图4
二了吧，设置行高为1的时候，对浏览器来说，意见很大。

求指点啊！

[ 本帖最后由 xmlovedoudou 于 2011-9-8 18:59 编辑 ]