Question

我正在写一个简单的网站，但想要展示亚洲字符（韩文）。

我正在使用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秒。

（我也很好奇该如何处理法语，但这是另一个问题）

Answer 1

几乎你所包含的任何字体都会让你超越你的速度规格。让我建议一个替代方案。

将Dotum设为默认字体。
测试用户系统上是否安装了Dotum。
也可以选择测试Helvetica和Arial Unicode。
如果用户没有安装任何这些字体，请下载Noto字体。

如何测试

没有正式的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和/或重音块的任意数量的轻量级字体。

亚洲字体的Web字体

1 个答案: