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}

行高可以有像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和pixel perfect。这将设计覆盖到我正在构建的网站上，我可以相应地调整CSS。