html - 从 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 应用的样式。但显然您不能代表其他用户这样做。

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