如何确保从 HTML 页面复制时字体大小正确？

Question

我有以下页面：http://pogopixels.com/test/generated.html

在此页面中，标题 "Massachusetts Personal Auto" 很简单：

<h1>Massachusetts Personal Auto</h1>

具有以下CSS：

@font-face {
    font-family: MyriadPro-Bold;
    src: url(https://pogopixels.com/clients/widgetworld/fonts/get.php?name=MYRIADPRO-BOLD.OTF); 
}

h1 {
    font-family: MyriadPro-Bold;
    font-size: 16px;
    text-align: center;
}

字体大小为 16px，当我在 Chrome 控制台中检查该元素时，我发现它确实是 16px。但是，当我将它复制并粘贴到 LibreOffice（或任何其他富文本编辑器）中时，字体显示为 12px。在 HTML 页面上，它确实看起来更像 12px 而不是 16px。

我不确定我错过了什么。如何确保它看起来像 16px 并且当我将它复制并粘贴到某处时它仍然是 16px？

Answer 1

当您从网页复制时，实际复制的数据取决于浏览器。当您粘贴到应用程序时，不同的应用程序将具有不同的能力来解释它从剪贴板读取的网页数据。

例如，当使用 Chrome 从您的示例页面复制时，剪贴板包含 HTML 和一堆内联样式，包括 font-weight: 16px。 LibreOffice Writer 似乎能够获取一些字体信息以及 HTML 结构，例如标题级别，但尽管有内联样式信息，它仍将字体大小更改为 12。

从 Firefox 复制时，剪贴板仅包含基本 HTML，没有任何内联样式。在这种情况下，LibreOffice Writer 除了将某些 HTML 转换为它自己的结构概念（例如标题级别）之外，不会执行任何特殊格式设置。至少这将允许您自定义 LibreOffice 应用的样式。但显然你不能代表其他用户这样做。

我认为没有办法在各种来源和目的地获得一致的结果。

Answer 2

好的，我找到问题所在了。我需要的不是以像素 (px) 为单位的大小，而是以点 (pt) 为单位的大小，文本编辑器使用它来设置字体大小。

因此，通过将字体大小设置为 16pt，我在文本编辑器中复制、转换为 PDF 等时得到了正确的大小

如何确保从 HTML 页面复制时字体大小正确？

How to make sure that the font size is correct when copied from an HTML page?

html

css

font-size

font-face