亚洲字体的Web字体

时间:2014-07-31 05:44:55

标签: css font-face webfonts web-standards page-load-time

我正在写一个简单的网站,但想要展示亚洲字符(韩文)。

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

(我也很好奇该如何处理法语,但这是另一个问题)

1 个答案:

答案 0 :(得分:1)

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

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

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