html – 嵌入式填充/字体边距

前端之家收集整理的这篇文章主要介绍了html – 嵌入式填充/字体边距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
似乎所有字体都有某种嵌入式填充或边距.通过设置:
margin: 0px;
padding: 0px;

你永远不会得到你想要的有人知道为什么会这样吗?

解决方法

这听起来像你所遇到的问题不在于CSS,而是字体本身.大多数字体定义了一个基线,x-height和line-height开箱即用.您的具体问题可能与字体的 leading之间的空格.有时,这些值可能会非常不一致.如果你真的想让一个特定的字体正确排列,我建议您查看 FontLab并编辑您正在使用的特定字体的glyphs / baseline / line-height.

您还可以查看网页安全版本的字体.这些类型的字体通常是特别间隔的,以便在网络上呈现最佳效果.这并不总是这样,但它可能会让你得到你想要的结果.查看Google的网络字体库here.

更新

这个答案已经得到了足够的重视,我决定把下面的第一个评论添加到答案中并对此进行阐述.

浏览器重置:每个浏览器将为许多预留的HTML标签设置默认状态,如a和strong.默认情况下还定义了其他内容,包括字体,行高,权重和大小.这可能会影响字体的呈现.通常这是本地化到特定的浏览器.因此,通过使用CSS重置,您可以消除浏览器中的默认呈现问题. Eric Meyers Reset是一个很好的重置,但有definitely others.尝试使用不同的,看看哪个最适合你.

但是,CSS可以通过定位所有浏览器并将其设置为相同的方式来重置工作.有些人喜欢使用某些东西,而是仅针对每个浏览器的问题.那就是Normalize会更好.

还有一个问题,CSS重置将无法解决.如字体混叠(使字体似乎顺利而不是锯齿状).由于某些浏览器和操作系统不会对字体添加抗锯齿功能,您还将看到字形宽度差异.不幸的是,这在大多数情况下是不可避免的.有些人使用像CufonSifr这样的Flash字体替换工具.这也有自己的问题列表(如FOUC).

另一个更新

仍然存在的另一个问题是字距调整的问题,或字形之间的空格.有一个CSS属性letter-spacing,它允许您在一个文本块上执行全局核心,但是它缺少定位像Photoshop或InDesign这样的单个字形的能力.字距还基于整个像素,所以你受到你可以实现的限制.它也有IE的问题,并不像人们希望的可靠.有一个叫做kerningjs的JavaScript,它是相当不错的,但它也是基于全像素的,因此不如光栅化文本那么准确.

总的来说,网络上的字体在过去几年中已经好转了.可悲的是,我们仍然在处理过去的问题,当字体只打算打印或光栅化时.不过,对于我们的字体爱好者来说,我们期待着希望.正如@allcaps所说,CSS3 specification for linebox是在那里,所以这只是一个时间问题,直到被广泛接受!

猜你在找的HTML相关文章