Question

我正在尝试在UTF-8 html文件中显示国际音标字符，其字体重量轻或超轻。

我已将问题最小化如下。

我找了一种可以显示国际音标的字体，并且具有浅色或超轻字体样式。我的第一次搜索是谷歌字体，在那里我找到了'助手'字体。当我使用国际音标（IPA）的字符在Google Fonts上测试此字体时，它似乎可以正常使用任何字体权重。

我准备了以下html文件，该文件使用“助手”字体并显示一些国际音标字符：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>hair</title>
  <link href="https://fonts.googleapis.com/css?family=Assistant:300" rel="stylesheet">
  <style>
  .ipa {
    font-family: 'Assistant';
    font-weight: 300;
    font-size: 34px;
  }
  </style>
</head>
<body>
  <div class="ipa">hɛər</div>
</body>
</html>

当我使用Chrome查看上述html文件时，“h”和“r”与预期一致，但“ɛ”“ə”似乎来自另一种具有不同权重的字体。

我试图通过替换：

来修改标题

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

使用：

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">

但结果是一样的。

我的文本编辑器（TextWrangler）对设置为Unicode（UTF-8）的新文件进行解码。我还检查过该文件是用UTF-8编码的，如下所示：

$ file --mime hair.html
hair.html: text/html; charset=utf-8

有关如何使用浅色或超轻字体样式显示国际音标字符的任何想法？

更新1

我已经取代

<link href="https://fonts.googleapis.com/css?family=Assistant:300" rel="stylesheet">

使用：

<link href="https://fonts.googleapis.com/css?family=Assistant:300&subset=all" rel="stylesheet">

Safari 9.1正确显示文字：

但是，Chrome 52和Firefox 48仍会显示文字：

在https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets，提到：

请注意，如果客户端浏览器支持unicode-range （http://caniuse.com/#feat=font-unicode-range）子集参数是忽略;浏览器将从支持的子集中进行选择字体来获得渲染文本所需的内容。

据http://caniuse.com/#feat=font-unicode-range报道：

Chrome 52和Firefox 48支持unicode-range，并忽略子集参数。（但是我的测试中的文本仍然显示不正确。）
Safari 9.1部分支持，子组参数不被忽略（文本在我的测试中正确显示）。

更新2

我已经取代

<link href="https://fonts.googleapis.com/css?family=Assistant:300" rel="stylesheet">

与

<link href="https://fonts.googleapis.com/css?family=Assistant:300&text=hɛər" rel="stylesheet">

现在，Chrome 52，Firefox 48和Safari 9.1的文本显示正确：

当我使用以下行包含更多字符时：

<link href="https://fonts.googleapis.com/css?family=Assistant:300&text=abcdefghijklmnopqrstuvwxyzɐɑɒɓɔɕɖɗɘəɚɛɜɝɞɟɠɡɢɣɤɥɦɧɨɩɪɫɬɭɮɯɰɱɲɳɴɵɶɷɸɹɺɻɼɽɾɿʀʁʂʃʄʅʆʇʈʉʊʋʌʍʎʏʐʑʒʓʔ" rel="stylesheet">

文字仍然正确显示。

但是，当我尝试使用以下行添加更多ipa字符和扩展名时：

<link href="https://fonts.googleapis.com/css?family=Assistant:300&text=abcdefghijklmnopqrstuvwxyzɐɑɒɓɔɕɖɗɘəɚɛɜɝɞɟɠɡɢɣɤɥɦɧɨɩɪɫɬɭɮɯɰɱɲɳɴɵɶɷɸɹɺɻɼɽɾɿʀʁʂʃʄʅʆʇʈʉʊʋʌʍʎʏʐʑʒʓʔʕʖʗʘʙʚʛʜʝʞʟʠʡʢʣʤʥʦʧʨʩʪʫʬʭʮʯʰʱʲʳʴʵʶʷʸʹʺʻʼʽʾʿˀˁ˂˃˄˅ˆˇˈˉˊˋˌˍˎˏᴀᴁᴂᴃᴄᴅᴆᴇᴈᴉᴊᴋᴌᴍᴎᴏᴐᴑᴒᴓᴔᴕᴖᴗᴘᴙᴚᴛᴜᴝᴞᴟᴠᴡᴢᴣᴤᴥᴦᴧᴨᴩᴪᴫᴬᴭᴮᴯᴰᴱᴲᴳᴴᴵᴶᴷᴸᴹᴺᴻᴼᴽᴾᴿᵀᵁᵂᵃᵄᵅᵆᵇᵈᵉᵊᵋᵌᵍᵎᵏᵐᵑᵒᵓᵔᵕᵖᵗᵘᵙᵚᵛᵜᵝᵞᵟᵠᵡᵢᵣᵤᵥᵦᵧᵨᵩᵪᵫᵬᵭᵮᵯᵰᵱᵲᵳᵴᵵᵶᵷᵸᵹᵺᵻᵼᵽᵾᵿ" rel="stylesheet">

以前没有正确显示文字。

结论

这可以作为一种解决方法，但它有其局限性并且不是很令人满意。希望谷歌字体将提供更好的解决方案。

Answer 1

默认情况下，Google字体仅返回拉丁字符的字体子集（浏览器之间的行为可能有所不同：某些实际上会发送对页面上正在使用的所有字符的请求）。有关详细信息，请参阅https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets。

您可以通过添加subset=all参数来发送整个内容：

<link href="https://fonts.googleapis.com/css?family=Assistant:300&subset=all" rel="stylesheet">

然而这是未记录的，即使它目前有效，可能在将来中断。

另一种方法是使用text参数提供所需字符的列表（当然，正确的URL编码）。可能很冗长。

这已在this Google Fonts issue中讨论过，但尚未解决。

我已尝试指定ipa子集，但没有运气。

带有国际音标字符和浅色或超轻字体的Html文件

1 个答案: