CSS中的行和字母间距

Question

我一直在和一个项目的设计师合作。 这位设计师伤心地生病了，正在医院里。 我正在努力将设计转换为HTML / CSS。 在离开之前，设计师给了我一些关于某些文字的信息。 对于文本，我被告知：

字体：Arial，跟踪/字母间距：72，行距/行间距：21

我知道在CSS中我可以使用这些信息创建一个类。 例如，我可以做到

.myClass { 
  font-family:Arial;
  letter-spacing:72;
}

我有两个问题，但我无法弄明白

谢谢！

Answer 1

Photoshop中的跟踪值实际上是千分之一的ems; Photoshop并没有向设计师指明这一点。 所以72 =（72/1000）em = 0.072em。 这将给你真正的像素完美，让你的设计师唱赞歌。

前导只是像素。

Answer 2

领导它

.myclass {line-height: 21px}

line-height可以有像px或em这样的单位，在没有单位的情况下使用，这是你看到它的常用方法 - 它是字体大小的百分比，所以例如如果font-size：是10px而你指定了一行 - 线高2的高度为20px

Answer 3

你走在正确的轨道上，你只需要添加单位。 这听起来像72是默认的72倍 - 这是一个巨大的空间。 粗略猜测，您可能想要尝试字母间距的百分比和行间距的像素，如下所示：

.myClass {
    font-family: 'Arial', sans-serif;
    letter-spacing: 1.72;
    line-height: 21px;
}

在我看来，使用除上面的%和px以外的任何东西都会导致不可见的值。 但是，如果这不正确，那么就要玩单位，甚至数值。 你有一个关于页面应该是什么样的图像来指导你吗？

Answer 4

更好的是以“em”为单位。

您的间距始终相对于您的字体大小。

但要回答你的问题，我同意Sam Starling和clairesuzy。

Answer 5

您应该向设计师询问他们在简报中提到的单位。 其他一切都只是猜测。 然后值得研究如何在CSS中实现该单元。

Answer 6

你会像其他人建议的那样需要这些单位。 如果你有一个PSD，你可以从那里解决。

我个人得到一些设计，我无法得到单位大小，通常是因为文本是光栅或我得到一个平坦的jpeg或东西。 在这些情况下，我使用firebug和像素完美。 这将设计覆盖到我正在构建的网站上，我可以相应地调整CSS。