复制HTML pre元素文本到Word时font-family属性识别异常问题咨询

问题根因 #

浏览器复制富文本内容时，会逐节点提取匹配到的CSS样式写入剪贴板的HTML片段。当你给通配选择器*设置font-family: inherit规则后，<pre>内部的<code>、<span>等子元素匹配到的第一条font-family规则就是inherit，浏览器没有自动将继承得到的实际计算字体值替换掉这个关键字，Microsoft Word无法识别inherit作为有效字体名，就会 fallback 到默认字体导致显示异常。
<div>标签不会触发该问题是浏览器对普通块级容器做了复制样式合并优化，<pre>作为预格式化语义标签未触发该优化逻辑。 #

方案1：CSS规则修正（优先推荐，无侵入） #

不需要修改HTML结构，只需要调整CSS选择器范围，避免<pre>内部元素匹配到font-family: inherit的通配规则即可：

/* 原通配规则排除pre及其内部元素 */
*:not(pre, pre *) {
    font-family: inherit;
}

/* 给pre及内部所有元素显式绑定目标字体，优先级覆盖通配规则 */
pre, pre * {
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

调整后页面原有样式完全不受影响，复制时pre内所有节点携带的font-family都是实际可用的字体列表，粘贴到Word可正常识别。 #

方案2：Copy事件拦截修正（适配无法修改全局CSS的场景） #

如果业务中全局通配符规则不能改动，可以通过监听pre元素的复制事件，手动修正剪贴板内的样式值，不影响页面原有展示：

// 给所有pre元素绑定复制修正逻辑
document.querySelectorAll('pre').forEach(pre => {
    pre.addEventListener('copy', e => {
        const selection = window.getSelection();
        if (!selection.rangeCount) return;
        
        // 克隆选中内容，临时写入正确字体样式
        const contentClone = selection.getRangeAt(0).cloneContents();
        const wrapper = document.createElement('div');
        wrapper.appendChild(contentClone);
        const targetFont = getComputedStyle(pre).fontFamily;
        wrapper.querySelectorAll('*').forEach(node => {
            node.style.fontFamily = targetFont;
        });

        // 将修正后的内容写入剪贴板，阻止默认复制行为
        e.clipboardData.setData('text/html', wrapper.innerHTML);
        e.clipboardData.setData('text/plain', selection.toString());
        e.preventDefault();
    });
});

该方案兼容所有现代浏览器，复制后粘贴到Word、WPS等办公软件均可正常识别字体，同时保留pre标签原有的预格式化、空白符保留等全部原生特性。 #

内容的提问来源于stack exchange，提问作者Trapster DK