Question

我正在尝试在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"> 时，“真棒字体”图标只是消失了，在屏幕上没有任何痕迹。因此问题是：如何使“真棒字体”图标正确显示在UTF-16编码的html页面中？

Answer 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 Icons：

<!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>

如何在UTF-16编码的html页面中使用“真棒字体”图标？

1 个答案: