前言
在互联网冲浪时，你是否遇到过想复制一段文字却发现无法操作的情况？最近在浏览某知名平台时，我就遇到了这样的问题。今天，就来给大家揭秘一下网页内容防复制的那些事儿。
阻止默认事件：基础防复制手段
最简单的防复制方法就是通过 JavaScript 阻止浏览器的默认复制行为。只需监听 copy 事件并调用 preventDefault() 方法，即可禁止用户复制内容。
document.addEventListener('copy', function(e) {
e.preventDefault();
});
这种方法虽然简单，但如果用户禁用 JavaScript，就无法起到防复制的作用。
CSS 样式：隐藏内容的巧妙招数
通过 CSS 样式，可以让用户无法选中网页内容，从而无法复制。使用 user-select: none; 样式可以禁止选中。
.anti-copy {
user-select: none;
-webkit-user-select: none;
position: relative;
}
.anti-copy::after {
content: "防复制保护中...";
position: absolute;
right: -100px;
}
不过，这种方法并不能真正保护内容，因为用户可以通过浏览器的开发者工具删除伪元素，恢复内容的可选中状态。
字符映射：让复制内容变得无意义
更高级的防复制手段是字符映射。通过字体文件对字体进行映射，使展示的内容与实际 DOM 内容不一致。即使用户复制了内容，得到的也是一串乱码。
<p class="mapped-text">这是一段映射后的文字</p>
<style>
@font-face {
font-family: 'mapped-font';
src: url('mapped-font.ttf') format('truetype');
}
.mapped-text {
font-family: 'mapped-font', sans-serif;
}
</style>
这种方式需要生成特定的字体映射文件，增加了实现的复杂度，但能有效阻止用户复制粘贴内容。
自定义渲染：全方位掌控内容显示
最高级的防复制手段是自定义渲染。通过 SVG 或 canvas 绘制内容，接管所有操作，使用户无法直接选中和复制内容。
<svg width="200" height="50">
<text x="0" y="20" fill="black">这是一段 SVG 文字</text>
</svg>
这种方法可以完全控制内容的显示和交互方式，但也增加了开发和维护的成本。
总结
网页内容防复制有多种方法，从简单的阻止默认事件到复杂的自定义渲染。每种方法都有其优缺点，需要根据实际需求进行选择。如果你只是想简单地防止用户复制，可以使用阻止默认事件或 CSS 样式的方法。如果需要更高级的防复制功能，可以考虑字符映射或自定义渲染。
