尝试将 Photoshop 字体大小转换为 CSS答案

【问题标题】：Trying to convert Photoshop font sizes to CSS尝试将 Photoshop 字体大小转换为 CSS
【发布时间】：2020-10-23 13:04:26
【问题描述】：

我最近收到了一个专为 iPhone X 设计的 Photoshop Mockup。分辨率为 1125px x 2436px @ 72ppi。我正在尝试将其转换为 CSS，并从字体开始。

例如，我的模型的标题文本是 60pt/px。但是，当我将其用作 CSS 字体大小时，它太大了。我尝试将 Photoshop 中的图像大小更改为 1125 x 2436 @ 458ppi，希望它能纠正字体大小，但字体大小实际上并没有改变，这让我很困惑。

谁能告诉我这里缺少什么？

【问题讨论】：

iPhone X 的比例因子为 3。因此，您可能会发现将这些值除以 3 会得到您想要的结果。 This 可能会有所帮助。
您的评论实际上让我最接近。我能够将所有内容缩小约 3 倍。

标签： css photoshop mockups

【解决方案1】：

您可以从您的模型中选择一个文本图层。然后右键单击此文本层，您将看到几个选项，但您需要单击“复制 CSS”。然后您的文本将转换为 CSS。例如：

Python_vs_PHP {

font-size: 56px;

font-family: "Montserrat";

color: rgb(0, 0, 0);

font-weight: bold;

line-height: 1.2;

position: absolute;

left: 307.359px;

top: 51.801px;

z-index: 7;
}

【讨论】：

不幸的是，这是基于 PSD 的大小。在 CSS 中使用这些值时，字体太大了。

【解决方案2】：

尝试使用 px 分配字体的大小，在这里将字体转换为 px 和 em https://www.joomlasrilanka.com/web-design-development-blog/web-design-font-size-measurements-convert-points-pixelsems-percentages-web-designing/

【讨论】：

【解决方案3】：

通常在执行此操作时，我不会使用 psd 中给出的确切字体大小，因为它们总是略微偏离并且不考虑动态页面和容器大小。相反，为 psd 选择最小的字体大小，并将其设置为 body 标记中整个页面的默认字体大小。然后根据它们在 psd 中的相对大小，制作与此相关的所有其他内容（以 em，而不是 px 为单位）。这样，您可以使用近似的字体大小完成页面的其余部分，然后稍后返回并在事后将单个字体大小调整为与您在 psd 中遇到的最相似的大小。

【讨论】：