我尝试使用Roboto和Open Sans显示,
和
:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto|Open+Sans&subset=greek-ext,latin,greek,vietnamese,cyrillic,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
<style type="text/css">
.opensans {
font-family: 'Open Sans', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div class="roboto">
<p>U+10320: <span></span></p>
<p>U+10321: <span></span></p>
<p>U+10322: <span></span></p>
</div>
<hr>
<div class="opensans">
<p>U+10320: <span></span></p>
<p>U+10321: <span></span></p>
<p>U+10322: <span></span></p>
</div>
</body>
</html>
但谷歌浏览器46.0.2490.80 不适用于 Windows 8.1 :
- 注意:我添加了拉丁语,拉丁语扩展名,希腊语和希腊语扩展名。
- 注意:在Firefox中正常工作。
答案 0 :(得分:0)
在Firefox工作中,因为默认使用 Segoe UI符号作为&#34;替换字体&#34;
我修改了代码:
body {
font-family: 'Segoe UI Symbol', sans-serif;
}
.opensans {
font-family: 'Open Sans', 'Segoe UI Symbol', sans-serif;
}
.roboto {
font-family: 'Roboto', 'Segoe UI Symbol', sans-serif;
}
在谷歌浏览器中工作。
参见示例:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto|Open+Sans&subset=greek-ext,latin,greek,vietnamese,cyrillic,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: sans-serif, 'Segoe UI Symbol';
}
.abrilfatface {
font-family: 'Abril Fatface', 'Segoe UI Symbol', sans-serif;
}
.roboto {
font-family: 'Roboto', 'Segoe UI Symbol', sans-serif;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div class="roboto">
<p>Hello word! Foo “ ” – — … ‐ ‒ ° © ® ™ • ½ ¼ ¾ ⅓ ⅔ † ‡ µ ¢ £ € « » ♥ ¿ ? #</p>
<p>U+10320: <span></span></p>
<p>U+10321: <span></span></p>
<p>U+10322: <span></span></p>
</div>
<hr>
<div class="opensans">
<p>Hello word! Foo “ ” – — … ‐ ‒ ° © ® ™ • ½ ¼ ¾ ⅓ ⅔ † ‡ µ ¢ £ € « » ♥ ¿ ? #</p>
<p>U+10320: <span></span></p>
<p>U+10321: <span></span></p>
<p>U+10322: <span></span></p>
</div>
<hr>
<div class="abrilfatface">
<p>Hello word! Foo “ ” – — … ‐ ‒ ° © ® ™ • ½ ¼ ¾ ⅓ ⅔ † ‡ µ ¢ £ € « » ♥ ¿ ? #</p>
<p>U+10320: <span></span></p>
<p>U+10321: <span></span></p>
<p>U+10322: <span></span></p>
</div>
<hr>
<div>
<p>Hello word! Foo “ ” – — … ‐ ‒ ° © ® ™ • ½ ¼ ¾ ⅓ ⅔ † ‡ µ ¢ £ € « » ♥ ¿ ? #</p>
<p>U+10320: <span></span></p>
<p>U+10321: <span></span></p>
<p>U+10322: <span></span></p>
</div>
</body>
</html>