允许用户从计算机中选择字体并在网站上使用该字体

Question

我希望我的用户能够从他们的计算机中选择一种字体并更新网页以使用该字体。

<style>
html * { font-family: Arial !important; }
</style>

我使用html *并且css我想将字体系列更改为用户的文件。

<script>
function change_css() {
    // ???
}
</script>

<div>
  <div</div>
  <input type="file" name="upload" id="upload"/>
  <input type="submit" value="submit" onclick="change_css();">
</div>

如何实施？

Answer 1

更改网页字体

在 JavaScript 中，如果您有一个 DOM 元素并想要更改其字体，您可以通过操作其CSSStyleDeclaration对象来实现。具体来说，通过设置element.style.fontFamily.

例如，

document.body.style.fontFamily = 'Noto Sans, Arial, sans-serif';

该演示创建了一个带有几个字体选项的 HTML 选择元素。默认情况下，正文的字体为“Arial”，但 select 元素附加了一个事件处理程序，以便在更改时，正文的字体也会更改以匹配新选择的选项。

如果要向列表中添加更多字体，只需向 select 元素添加其他选项，并将属性设置value为字体名称即可。

document.body.style.fontFamily = 'Noto Sans, Arial, sans-serif';

var fontSelector = document.getElementById('font-selector');

fontSelector.addEventListener('change', (event) => {
    document.body.style.fontFamily = event.target.value;
});

body { font-family: 'Arial'; }

从用户处获取字体

tl;dr：您可以使用用户已安装的任何字体，而无需他们上传它们。但出于隐私原因，您无法知道用户安装了哪些字体。

当您在 CSS 中指定字体名称时，如果用户计算机上存在该字体（或者以 Web 字体形式提供），浏览器将使用该字体，否则浏览器将恢复为默认字体。无需实际将字体从用户的计算机上传到您的服务器。

换句话来说：当浏览器进行字体渲染时，它从用户的计算机获取字体，而不是从服务器获取字体。将字体从用户计算机上传到您的服务器是没有意义的。当您使用网络字体时，您会将字体从服务器发送到用户的计算机（它存储在临时位置），然后浏览器使用它。另请注意，网络字体通常与用户在其计算机上安装的字体的文件格式不同。

当然，需要注意的是，您不知道用户计算机上有哪些字体（因此您不知道在上面示例的 select 元素中列出哪些字体）。大多数网站不会尝试了解，它们只是使用“网络安全”字体（即默认情况下安装在大多数操作系统上的字体）或明确提供网络字体（通常通过Google Fonts等服务）。

JavaScript 不提供 API 来了解用户计算机上安装了哪些字体。这是故意的，因为此类信息可用于对网站访问者进行简单的“指纹识别”。一般来说，允许网站过多了解用户计算机的设置细节将被视为隐私问题。

确实存在库和脚本（例如这个），允许您查询用户计算机上是否安装了特定字体（不是所有已安装字体的列表，只是查询“是否安装了字体 [x]？”） 。这些都是通过一些猜测来实现的，但并不总是正确的。还有一种方法可以使用 Adob​​e Flash获取已安装字体的完整列表（请注意，域是 browserspy.dk，因为该技术用于指纹识别，正如我之前讨论的那样），但现在大多数用户没有安装 Flash。

标准方法是提供您想要的任何字体作为网络字体，通过网络提供给用户。

一个黑客解决方案

话虽如此，您可以做一些事情，但需要一点努力：

您可以让用户选择一个字体文件（无需将其上传到服务器），然后使用此 javascript 库从该文件中提取字体名称，然后将网页的字体设置为该名称。

现在，如果他们的桌面上或下载文件夹或其他东西上只有一个随机字体文件，则这将不起作用。用户提供的文件必须是他们实际安装在系统上的字体。

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<label for="font-selector">Select Font</label>
<select id="font-selector">
  <option value="Arial">Arial</option>
  <option value="Times">Times</option>
  <option value="Courier">Courier</option>
</select>

var fontSelector = document.getElementById('font-selector');

fontSelector.addEventListener('change', (event) => {
  const fontFile = event.target.files[0];
  const fontReader = new FileReader();

  fontReader.onload = (e) => {
    try {
      const fontMeta = FontName.parse(e.target.result)[0];
      document.body.style.fontFamily = fontMeta.fontFamily;
    }
    catch(err) {
      // failed
    }
  };
  fontReader.readAsArrayBuffer(fontFile);
});

body { font-family: 'Arial'; }

更稳健的解决方案

基于网络的照片编辑软件通过完全接管字体渲染来实现这种技术。他们不是让浏览器使用系统字体渲染文本，而是使用 javascript 库来解析字体文件，然后为每个字形创建 SVG 定义。然后他们管理每个 SVG 在网页上的位置，包括字距调整、行距、连字等。这些 javascript 库非常庞大且复杂，需要您做更多的集成工作才能使其运行。

要探索此选项，您应该首先查看Typr.js或opentype.js等库。