【发布时间】：2016-09-10 08:16:18
【问题描述】：
我正在尝试在 UTF-8 html 文件中显示国际音标字符，其字体粗细可以是轻量级或超轻量级。
我已将问题最小化如下。
我寻找一种可以显示国际音标并且具有浅色或超浅色字体样式的字体。 我的第一次搜索是在 google 字体上，在那里我找到了“Assistant”字体。 当我在 Google Fonts 上使用国际音标 (IPA) 字符测试此字体时，它似乎适用于任何字体粗细。
我准备了以下使用“Assistant”字体并显示一些国际音标字符的 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，subset 参数被忽略。 （但文本在我的测试中仍然显示不正确）。
- 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">
文本没有像以前那样正确显示。
结论
这可以用作一种解决方法，但是它有其局限性并且不是很令人满意。希望谷歌字体能提供更好的解决方案。
【问题讨论】：