如何在 UTF-16 编码的 html 页面中使用 Font Awesome 图标？答案

【问题标题】：How can I use Font Awesome icons in a UTF-16 encoded html page?如何在 UTF-16 编码的 html 页面中使用 Font Awesome 图标？
【发布时间】：2019-09-22 22:52:12
【问题描述】：

我正在尝试在我的 UTF-16 html 页面中使用 Font Awesome 图标，但由于编码原因，这些图标无法正常显示。一步一步走，效果很好：

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <style>
    .ololo::after {
    content: "\f007";
    font-family: 'Font Awesome\ 5 Free';
    }
  </style>

</head>
<body>

  <h1><i class="fas fa-american-sign-language-interpreting"></i></h1>
  <h1 class="ololo"></h1>

</body>
</html>

<meta charset="UTF-8"> 时两个图标都显示得很好。但是当我将页面切换到 <meta charset="UTF-16"> 时，Font Awesome 图标就消失了，在屏幕上没有留下任何痕迹。所以问题是：如何让 Font Awesome 图标在 UTF-16 编码的 html 页面中正确显示？

【问题讨论】：

为什么要使用 UTF-16？
@Ry- 我的 Freemarker 模板正在编译为 UTF-16 文件，以及我的 Java 项目的其余部分，这就是我不能简单地切换到 UTF-8 的原因跨度>
关于Content-Type HTTP 标头，您能告诉我们什么？他们是否声明了编码？如果是这样，它是正确的还是不同的？
@ÁlvaroGonzález 是的，可以设置Content-Type: text/css; charset=utf-8，但我看不出它与问题有何关系。你能解释一下它是怎么做的吗？
我没有投反对票，但我可以想象投反对票的一个原因是我拿走了您的源代码，将其保存为 UTF-16 并且效果很好。

标签： css unicode utf-8 font-awesome utf-16

【解决方案1】：

使 Font Awesome 在 UTF-16 页面上工作的唯一方法是将引用的 Font Awesome CSS 文件从 UTF-8 转换为 UTF-16。为此，首先将 Font Awesome 包下载到您的机器上，然后获取 css/all.min.css 文件并将其转换为 UTF-16。这段 Java 代码做得很好：

import java.nio.file.*;
import java.io.*;

public class Convrtr {

    public static void main(String[] args) {

    Path source = FileSystems.getDefault().getPath("/home/absolute/path/to/fontawesome/css","all.min.css");
    Path result = FileSystems.getDefault().getPath("/home/absolute/path/to/fontawesome/css","awesome.min.css");

    try(Reader r = new InputStreamReader(new FileInputStream(source.toFile()), "UTF-8");
        Writer w = new OutputStreamWriter(new FileOutputStream(result.toFile()), "UTF-16")) {

    char buffer[] = new char[2048];
    int length;
    while ((length = r.read(buffer, 0, buffer.length)) != -1) {
        w.write(buffer, 0, length);
    }
    } catch (IOException e) {
        System.err.print("IO Error");
    }

    }

}

运行此代码后，您将获得全新的 awesome.min.css 文件，该文件与以 UTF-16 编码的旧 all.min.css 相同。而且您实际上不需要更改其名称（我这样做只是因为在同一个文件夹中工作）。从此刻开始，此页面将正确显示 Font Awesome 图标：

<!DOCTYPE html>
<head>
  <meta charset="UTF-16">
  <link rel="stylesheet" href="fontawesome/css/awesome.min.css"/>

  <style>
    .ololo::after {
    content: "\f007";
    font-family: 'Font Awesome\ 5 Free';
    }
  </style>

</head>
<body>

  <h1><i class="fas fa-american-sign-language-interpreting"></i></h1>
  <h1 class="ololo"></h1>

</body>
</html>

【讨论】：