css - 亚洲字体的 Webfonts

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 ，但我真的希望我的网站在不牺牲美观的情况下再次回到 <100 毫秒。

我想到了使用类似 Google Web Fonts 的东西, 但找不到亚洲字体的任何内容(也许我看得不够仔细？)。我也想到了缓存，但这最适合我找不到的 webfont 之类的东西。我查看了一个流行的韩国网站，naver.com我认为他们只使用 Dotum 字体(这很好，但假设用户有 Dotum)。

来自 naver 的 CSS:

font-family: "돋움",Dotum,Helvetica,"Apple SD Gothic Neo",Sans-serif;

为想要阅读一点韩文文本的用户提供良好字体的最佳做法是什么？我只是希望能够亲自访问我的网站，而不必等待整整 1.6 秒以上才能显示任何文本。

(我也很好奇法语怎么办，但那是另一个问题)

Answer 1

几乎所有你包含的字体都会让你超越你的速度规范。让我提出一个替代方案。

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

如何测试

没有正式的 API 来确定是否安装了字体，但常见的解决方案是 here 。基本上，您设置一个带有大字体的虚拟元素(等宽字体很流行但可选)，使用您想要的字体设置第二个虚拟元素(使用等宽字体作为后备)，然后比较两者的宽度以查看您的所需字体已成功加载。

这是他的代码，但您可以通过一些搜索找到类似的解决方案(其中许多不使用 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 和/或重音 block 。