我正在写一个简单的网站,但想要展示亚洲字符(韩文)。
我正在使用Google's Noto Fonts,但意识到每个.otf文件都超过4M。我正在尝试保持我的网站精简和快速,但注意到我的网站加载<100毫秒,直到我添加自定义字体,这需要超过1.5秒。
我正在使用非常基本的样式:
<style type="text/css">
@font-face {
font-family: NotoSans;
src: url("/assets/fonts/NotoSansKR-Medium.otf") format("opentype");
}
pre {
font-family: NotoSans;
}
</style>
我调查Compressing fonts for using in web,但我真的希望我的网站能够在不牺牲美学的情况下再次恢复到<100ms。
我想过使用像Google Web Fonts这样的东西,却找不到亚洲字体的东西(也许我看起来不够努力?)。我也考虑过缓存,但这对于像webfont这样我无法找到的东西最有效。我查看了一个受欢迎的韩国网站naver.com,我认为他们只使用Dotum字体(非常好,但假设用户有Dotum)。
来自naver的CSS:
font-family: "돋움",Dotum,Helvetica,"Apple SD Gothic Neo",Sans-serif;
为想要阅读一些韩文文本的用户提供良好字体的最佳做法是什么?我只想亲自能够访问我的网站,而不必在任何文本出现之前等待整整1.6秒。
(我也很好奇该如何处理法语,但这是另一个问题)
答案 0 :(得分:1)
几乎你所包含的任何字体都会让你超越你的速度规格。让我建议一个替代方案。
如何测试
没有正式的API来确定是否安装了字体,但常见的解决方案是here。基本上,你设置一个大字体的虚拟元素(等宽字体很流行,但是可选),用你想要的字体设置第二个虚拟元素(使用monospace作为后备),然后比较两者的宽度,看看你的所需的字体已成功加载。
这是他的代码,但您可以通过一些搜索找到类似的解决方案(其中许多不使用canvas
,如果需要浏览器支持的话):
// Call this function and pass in the name of the font you want to check for availability.
//
function doesFontExist(fontName) {
// creating our in-memory Canvas element where the magic happens
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
// the text whose final pixel size I want to measure
var text = "abcdefghijklmnopqrstuvwxyz0123456789";
// specifying the baseline font
context.font = "72px monospace";
// checking the size of the baseline text
var baselineSize = context.measureText(text).width;
// specifying the font whose existence we want to check
context.font = "72px '" + fontName + "', monospace";
// checking the size of the font we want to check
var newSize = context.measureText(text).width;
// removing the Canvas element we created
delete canvas;
//
// If the size of the two text instances is the same, the font does not exist because it is being rendered
// using the default sans-serif font
//
if (newSize == baselineSize) {
return false;
} else {
return true;
}
}
如有必要,请下载字体
如果似乎没有安装其他字体,那么你可以简单地应用Noto字体。你可以使用Javascript或jQuery轻松地做到这一点,但我是jss的忠实粉丝,可以快速轻松地进行动态修改。
关于法语的一点
最后,如果您想使用法语文本,我认为您不会遇到同样的问题。 Latin Extended是无处不在的,包含法语中使用的组合重音的Unicode代码块包含在许多字体中。如果您特别担心,可以包含Google Fonts或Typekit中包含Latin Extended和/或重音块的任意数量的轻量级字体。