html - 字体中的嵌入式填充/边距

标签 html css fonts margin padding

似乎所有字体都有某种嵌入的填充或边距。通过设置:

margin: 0px;
padding: 0px;

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

最佳答案

听起来您遇到的问题不是 CSS,而是字体本身。大多数字体开箱即用地定义了基线、x 高度和行高。您的具体问题可能与字体的 leading 有关, 行与行之间的空间。有时这些值可能会非常不一致。如果您真的想让特定字体正确排列,我建议您查看 FontLab并编辑您正在使用的特定字体的字形/基线/行高。

您还可以查看该字体的网络安全版本。这些类型的字体通常有专门的间距以在网络上呈现最佳效果。情况并非总是如此,但它可能会为您提供所需的结果。查看 Google 的网络字体库 here .

更新

这个答案受到了足够的关注,我决定将下面的第一条评论添加到答案中并对其进行阐述。

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

但是,CSS 重置的工作原理是针对所有浏览器并将它们设置为相同。有些人更喜欢使用仅针对每个浏览器的问题的东西。那是 Normalize会更好。

还有一些问题是 CSS 重置无法解决的。例如字体别名(使字体看起来平滑而不是锯齿状)。由于某些浏览器和操作系统没有为字体添加抗锯齿功能,因此您还会看到字形宽度差异。不幸的是,这在大多数情况下是不可避免的。有些人会使用像 Cufon 这样的 flash 字体替换工具。或 Sifr .这也有它自己的问题列表(例如 FOUC )。

另一个更新

另一个仍然存在的问题是字距调整或字形之间的空间问题。有一个 CSS 属性 letter-spacing这将允许您对一段文本进行全局紧排,但它缺乏针对单个字形的能力,如 Photoshop 或 InDesign。字距调整也基于全像素,因此您会受到所能实现的限制。它也有 IE 问题,并不像人们希望的那样可靠。有一个名为 kerningjs 的 javascript这相当不错,但它也是基于整像素的,因此不如光栅化文本准确。

总的来说,网络上的字体在过去几年里变得更好了。可悲的是,我们仍在处理过去的问题,当时字体仅用于打印或光栅化。不过,对于我们字体爱好者来说,希望就在地平线上。正如@allcaps 所说,CSS3 specification for linebox就在那里,所以它被广泛接受只是时间问题!

关于html - 字体中的嵌入式填充/边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16488373/

相关文章:

PHP 自动链接(如果尚未链接)

html - 居中自己创建的 div 类响应

html - 使用 <menu><li> 混合水平和垂直 css

javascript - 在两个变量之间随机选择,并将其中一个值设为true

css - -webkit-font-smoothing 属性在 Chrome 中无效

css - 如何将使用谷歌字体替换为本地托管字体?

java - 在代号一上设置标签字体不起作用

html - 制作面包屑......不像真正制作面包屑那么容易,我怎样才能让文字出现在里面?

c# - 在Web服务中使用带有外部CSS的HTML页面中的iTextSharp创建PDF

css - 为不同的路线 react 其他颜色