我已经制作了一个字体，我将在我的网站上使用它。但我想让用户无法下载我的字体并使用它。我应该做些什么来实现这一挑战？
我试图通过使用Typekit找到任何解决方案，但我没有找到任何解决方法。
除了将字体字符显示为图像之外，没有什么好的解决方案。
如果你向网络浏览器提供一些东西，网络浏览器的用户可以下载并重新上传。就这么简单。
作为一个作者，你的主要工具是版权和法律制度。
我同意@Slava Knyazev的观点
但是，您至少可以让复制字体成为一项烦人的任务
一些想法：
-
将字体拆分为子集。例如，一个字体文件只包含字形A-Z，另一个文件包含小写字母0-9等。通过这种方式，盗版者需要连接并重新编译单独的字体文件，以获得可用的字体。
-
将字体子集嵌入为base64数据URL–诚然，您仍然可以下载字体，但不太方便
您可以使用类似transfonter的工具来生成子集和数据URL。 -
使用伪字体家族名称：例如谷歌网页字体的名称。理想情况下是一个字体非常相似的名称。盗版者可能会尝试直接搜索字体，这只会增加一点混乱。
示例：字体拆分为子集
let string = 'abcdefghijklmnopqrstuvwxyz';
// string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
//string = '0123456789';
//console.log(string);
let range = 'unicode-range:'+string.split("").map(codepoint => 'U+'+codepoint.codePointAt(0).toString(16).padStart(4, 0)).join(', ')+';';
//console.log(range)/* a-z */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiQW7Nf0ONi7pdh54zuqOrY__cSidcLad6Vkph&skey=2d58b92a99e1c086&v=v23) format('woff2');
unicode-range:U+0061, U+0062, U+0063, U+0064, U+0065, U+0066, U+0067, U+0068, U+0069, U+006a, U+006b, U+006c, U+006d, U+006e, U+006f, U+0070, U+0071, U+0072, U+0073, U+0074, U+0075, U+0076, U+0077, U+0078, U+0079, U+007a;
}
/* A-Z */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiQU7tX2Otq5p9p74TmoOLQ9_8agd8DYdadmpB&skey=2d58b92a99e1c086&v=v23) format('woff2');
unicode-range:U+0041, U+0042, U+0043, U+0044, U+0045, U+0046, U+0047, U+0048, U+0049, U+004a, U+004b, U+004c, U+004d, U+004e, U+004f, U+0050, U+0051, U+0052, U+0053, U+0054, U+0055, U+0056, U+0057, U+0058, U+0059, U+005a;
}
/* 0-9 */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAqwAA8AAAAAFOwAAApaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYAA8CC4JjWURDAqNWI0jCxIAATYCJAMaBCAFiBEHMgxLG5UTs6NVzwPZWbL/+oAbQ6EPrFvQ4BvJwCILlTttZSedzJV0nzDp/oMWG0XxnUz8O7knK3+IxDWxl/Pi3qBV1nQtJziGr+pyMkKSWfiP9uvz3Krq7vc+49AC8PxlCLiVIck2ikHFblQUsCMQLkawmkEc3PBifso48RrI09LNKZxOBu7Hn3yp039ZBg6CWlUO6AtTLlPpz3sBN7mw7JmzTvHpt8kt0Sf5HYkZnlh0zR+zj3gWACoX/D/8/6srw0UDpC2ezg+QHKAFhzTD1c5WVlAaqtPU6qprT/5+rrQv2dwVKOsq8Zd4PDrRqarcvMBe3hL/PSDIbYFQEoxHFVUiEra2wgEJpzuMXQAmFunyQZdZyl0zCMMgYEjANM+d0j5nrKmMBOnpRADNVW39C57Wl8ptNFmYebg5IJ7S489cv0yXBnvyxV6vsvKJPmoAbwL8n/Q+0EA4AjJMRVDBGWwUMhembO0HDXb28QzuXxGpz7yYsUovgdqmL/wf9O651ze/0Uj9Tz1YV3GJtEW5vQFP3S4FkLQVpwey+oGsf3bevKtf4um889wnJ/YVef+dmsR12bL2CuTipkQ3TDhZtVc9FpFYM+9I7adkLu5gF8wpFDrAVh1XoZ0EEepIkEW4PCbgVUfILwZAnCOD/6M34N0AsCZC1BuwXudxQG5bwFofSJPnuqobbXHDMLWtATXlHq0JnrEy/gd+BjqJmJd7laFax0SyJrwICQ8E2ssQJtpR2MfCFCGxgAMTnvmFTJAXqEcddYO/9QY2S59TVbK63jgR84wE7pA5rP14Yz3ApI1BBm4HROQcAyFdUgabQ5oiPFbXB8IGIlImdRoZ6GAV8iesOlMLOqPzf+S8T4GYiCzRNpCQNBPOcVo5NtX3bgc5mXtL6RIakGzB/utARvoAukBOl3AxDti8sTgFDP4DAKe/2HGfKXgOxXatZpqTAPOvFCipudsGWowikDe31jb1AgaP1DAO6IDd/aIeZzazsgZ1HFqI/VvPAx0CBkiDNEVb0O7qlZbaugeTdCNqCknh/1QecOEy2Xq/6g6euqZcPUt1bZJiNBGxquZM2jTzfsxhnaNgyWzjcd4aksuWK4tQcYQyjZQnyWLip5OVTcuxMyKeIkxTYWJZJbK8aQvK8SI/EVBN+WOWj2SAnZ7JB3hnPoEVp0DPlVEk4VdJa4+PHP2xiHSUNEVojDAN9qFVPhGXQnjrGpFr3tHECMZ8gQsFZuVZkLMO642tyaDHknRK0LCLATJaVRnl9sqId/WITI3XttOLTm1q+hh7L466jCc7X8lEcNHs2ikBfQqEB8jyypsNxfZsWmaVc+oBFyFKUrQg2g30pjvWpsyK6NqqVJsUm6p7dhN8boifBS6IBJVBtEJTK+47Bjqcz6iPpImEW4uzJEPz8IR7YGvHzh/jMZ+MCCuiQojlROd+G66KJuatvBE79k5czj0xNZpW3ThUsSJ60rReCTESjo0wpq0MFoQJ2EBfEEjqw6XUp6ui2gEEiXaBQEyCQFyCQEKCQLILCaQkEkhLJJCRSCFZoRKUE+rauZZ6YemcoIRH6XWv6DpG15qR/oeeBCYK8L8F3FD51OsxFBQEAl7KMHHw9PYWXngN3z3Q1drR0hKdFWjTMrl6ujoJS78BC/bm+sAChvj0S3jhfP8wkDbUNwcWXCRg4zGW2ERMYtrd1RVYcHPzAEt/hAjeW31xIRksuJKBrmV44a3FE0mdzmpV1XVk6YFsfOHxSOCbjufCpzfzmr2FIwuXAWBM6a2CvpePAzANYzHV9YEFNZCNC80n7tObIm7hjY1tL2vXT19dTaw/Mk1182C3ej59dFd0drYmkwlGRNWHQ0+Vz0FOltn0wOErlwzGLwEeJV5x4Pv351pST1GePzx6HE4/TSVJKfoqBoUd05BI1McpJPZC/NJ1Anj/hOgJ2Or5X5uNoyUzXOHkim1wyJJtt5jilpZM8YVTczAkeO9C9mb4ucUumRen3HgFDY0cdMzFOV3rXs+O4PSf8BzLkit1LiT0/6FWhhadZCdr1B9WDlBOMeQBh9zV/Y7N0hE+6pUuZqK55kkBUUtx6QnmCJ43zFjGoCVl/Fvgo3znAI1AzhBVVV4XbWVnFhkZR1YdOTHjlqSfDJRtbk5opLtpTYJ3i9QMz3a/Y71kiKtyrqUWR4CamaNsWiFX0XCmp0FzesiQgmdEu1yop24enakhqx6R8CYcL0d44tXTVPUSNDQMEzMw5nYVVWBxNdMu4Q1LdwDiNlfncpRT4XHUVHRiRpRFTZYnp//S/8MYoDtQVlJUkJeTlZGSEODj4mBlxuOoKEBqQcMxVzM7NU0FIUMruMlcu1GYYidgjon1BKmKJNZT1xk65Dy4SlWVwjdQylBp1IuXxoIeD3TX9Aybqck1i9TobsHovq8WuwbqHUqpoN3FyQ006wcf/FjOdkGu1sLc2EiO8PbMC5hJdJDGV3Fn2QYmaIQTMFeMuRDmY8H0Tr7YZd/dAVy0uziJNuMoT4jAjY+NjgzXRaSq3B4K2bRyH4aJ3ZgNrrogsA4RQ9FI6L4GnyKmb3sR2iuNCu+muhliO2hz4+TQzbzYFeXsirfAN4Pzr0gpWh5044IYsXVzpzU1OTbMHu3JrjTZtkPhgzzH6FDh8pAWhutKgvFVJIMOZkPWyE6tYotEJAl7BxfrWzC6N2mxKyXYwUyi3cVJtJktBuhmTq0dObRr547t6zuL85PjXJRBTfgnc1bUeUCRZuXmK5Scckm7sfAw300iLEWpb86opBIkiqh20oQaVWEJ9KBScS7kghtwPi0wbRa09NVjUuqJcsrlqO4KAVr4sF/MR9dRpX/Y1fIH4Kc3XdLpP+RPIdvGvrib+oEKA0BQPul9QDwHEHcRvWFSbGAbLewD0LNCLY/yEw/xWHVgxSUiZbQgHKrlNT2KBWN8BwYv6EsmgheYUXiFOZt5mwVDfMsSG/mZZYb46/wjLNDnKGrQlOaXTFS2jRkjto85t02TBXP2Lktct1EznxlwB4yw12d/zXP49+b0ybC0/EasxWX3oHcN2l6qkBQ9Nr1vW5nMpxEa7waGT5NQ34y+3YWUlBPeGm6+e034+3h5/zAUNA7qn2gclIWIkvr7HxuoWskohXUc9qEc1mHjAlvza8qTtNV/SGDOGfcL79mL2v0ZKJ611O9S1r9kc7rwozuHnt99d2HWqFQn53N5SsAzTYFCIpMs529DBoYOlDoPVIRIWOCiEiIKPdjo+WxWpb8JmrOXPPBiK9hyNbMl7FAJatMbImbjcTkXRImSAK1C1NkShQJVqGqBAKoWU29HXg13qdh8sAtXFhaen2K64LOrQSYM3ahoZdpVebjy3N/5KwuvFOgAsBJUcb8Ry8ViL45Vs0o0K/CPnqcs5CXmFnFfEVvMSt3DYalKzjQwprTErDbLt+PqRKKCafprs5ydguI7jQionEt0t3MxwMD90er5c6/5nRsaGZsMi2WWBOqx8PQ/erXE2u3ve5jvxmYQcZd5iBNP2EPaGndrDzqlQa5v1BfjPb8mLAAA') format('woff2');
unicode-range:U+0030, U+0031, U+0032, U+0033, U+0034, U+0035, U+0036, U+0037, U+0038, U+0039;
}
*{
font-family:'Open Sans';
font-weight:400;
}<h1>ABCDabcdefg0123</h1>使用opentype.js将文本转换为svg
如果您只需要显示字体的示例，则可以使用opentype.js.将文本解析并呈现为svg<path>元素
let svgcontainer = document.querySelector('#svgcontainer');
let inputText = document.querySelector('#inputText');
// opentype.js accepts only ttf and otf
let fontFile = 'https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf';
inputText.addEventListener('change', function(e) {
let testString = e.currentTarget.value;
let params = {
string: testString,
font: fontFile,
fontSize: 100,
x: 0,
y: 0,
decimals: 3
}
text2Path(params)
})
//default
let params = {
string: inputText.value,
font: fontFile,
fontSize: 100,
x: 0,
y: 0,
decimals: 3
}
text2Path(params)
function text2Path(params) {
opentype.load(params.font, function(err, font) {
if (!err) {
let options = params.options;
let path = font.getPath(params.string, params.x, params.fontSize, params.fontSize, options);
let textPath = path.toSVG(params.decimals);
let newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
newSvg.classList.add('svgText');
newSvg.id ='svgTextEl';
newSvg.setAttribute('xmlns', "http://www.w3.org/2000/svg");
newSvg.insertAdjacentHTML('beforeend', textPath);
svgcontainer.innerHTML = newSvg.outerHTML;
// adjust bbox
let bb = svgTextEl.getBBox();
svgTextEl.setAttribute('viewBox', '0 0 ' + (bb.width + bb.x) + ' ' + (params.fontSize * 1.5));
//svgcontainer.innerHTML = newSvg.outerHTML;
//add downloadbtn
let btnDownload = document.createElement("a");
btnDownload.setAttribute('download', 'font-' + params.string + '.svg');
btnDownload.textContent = 'Download';
let dataURl = getDataUrl(newSvg.outerHTML, 'image/svg+xml');
btnDownload.href = dataURl;
svgcontainer.appendChild(btnDownload)
} else {
console.log('Font could not be loaded: ' + err);
}
});
}
function getDataUrl(str, mime) {
let dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(str)))
return dataUrl;
}.svgText {
height: 10em;
display: inline-block;
border: 1px solid #ccc;
}
a {
display: block
}<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
<div class="layout">
<div class="frm-wrp">
<input id="inputText" type="text" value="Test">
</div>
<div class="svgcontainer" id="svgcontainer"></div>
</div>这些措施都不是适当的保护措施。但至少复制你的字体不会很有趣；(