所以我的问题是，photoshop 中的 12pt 怎么可能与 web 中的 12pt 不同？

有几个原因。

1. 它们是具有不同字体渲染引擎的不同媒介。简而言之，Photoshop 不是网络浏览器。它不基于 CSS 和 HTML 呈现。

2. 点，对于测量类型，不是精确的测量。点是指字母的边界框，而不是字母本身。字体文件和渲染引擎的差异也会导致这种差异。

3. Photoshop 中的 DPI 和缩放级别与浏览器中的缩放级别。它们可以简单地变化。

另请记住，您可能无法从浏览器到浏览器甚至设备到设备的类型匹配。您无法控制的变量太多了。因此，永远不要假设他们在 Photoshop 中构建的内容就是他们在浏览器中看到的内容。Photoshop 根本不是网页。作为一个起点很好，但不要把它当成一成不变的蓝图。

渲染的字体大小（缩放级别为 100 %）也取决于图像的 dpi 设置。

尝试其中之一：

• Web 图形的旧学校标准：72 dpi
• 通常的桌面显示：96 dpi

添加到 Scott 的回答中，Photoshop 或 web 中字体大小差异很大的原因可能是因为 Photoshop 使用点，而 web 使用像素（或者ems，我强烈建议不要这样做px）。

关系的计算类似于：

以像素为单位的字体大小/以点为单位的字体大小 = 浏览器 dpi (96) / Photoshop 图像分辨率（ppi 或每英寸点数）

因此，如果您有一个 13pt 字体、72 ppi 的 Photoshop 图像，则在 Web 浏览器中显示的相应字体大小（以像素为单位）为

以像素为单位的字体大小 = (13/72)*96 = 17.3 像素

您可以在此处查看转换表。

Photoshop 和浏览器都不同，因此可以使用文本大小。我也有这个问题，所以我用谷歌搜索并找到http://pxtoem.com你可以看到它的字体大小是如何工作的，以及你可以为你的文本使用哪种字体大小。