CSS中的行距和字母间距

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

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

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

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

我有两个问题我想不出来

当我这样做时，字母间距看起来太大了。它看起来不像原来的设计。我需要补充一些单位信息吗？有没有一个我应该知道的标准单位

如何在CSS中获得21（单位？）的行距

谢谢大家!

领导它的

.myclass {line-height: 21px}

行高可以有px或em这样的单位，在没有单位的情况下使用，这是您通常看到的方式-它是字体大小的百分比，因此，例如，如果字体大小：为10px，并且您指定的行高为2，则行高将为20px

---

请参阅：

您走对了方向，只需添加单位即可。听起来

72

的默认值是正常值的72倍，这是一个巨大的空间。粗略猜测，您可能希望尝试字母间距的百分比，行距的像素，如下所示：

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

---

在我看来，使用上述

%

和

px

以外的任何东西都会产生不可见的值。然而，如果这是不正确的，那么就玩单位游戏，甚至是数值游戏。你有没有关于页面应该是什么样子的图像来指导你呢？

最好是以“em”为单位

跟随间距始终与字体大小相关

---

但是为了回答你的问题，我同意萨姆·斯塔琳和克莱尔苏兹的观点。

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

您将需要其他人建议的单元。如果你有一个PSD，你可以从那里解决它

---

就我个人而言，我得到的一些设计，我不能得到单位大小，通常是因为文字是光栅或我得到一个平面jpeg或其他东西。在这些情况下，我使用firebug和。这将设计叠加到我正在构建的网站上，我可以相应地调整CSS。

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

---

领先只是以像素为单位

@Unicorn，询问者说他们不能问设计师。他们在推测方面需要帮助。你可以尝试不同的单位，如em、px、pt或%。我发布了真实的-无猜测游戏-下面的跟踪答案。不允许使用字母间距的百分比值。