亚洲字体的网络字体

Question

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

我正在使用Google's Noto Fonts，但意识到每个 .otf 文件都超过 4M。我正在努力使我的网站保持精简和快速，但注意到我的网站加载需要

我正在使用非常基本的样式：

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

我曾想过使用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 的任意数量的轻量字体，其中包括拉丁扩展和/或重音块。