Веб-шрифты для азиатских шрифтов

Я пишу простой сайт, но хочу отображать азиатские символы (корейские).

Я использую шрифты Google Noto, но понял что каждый из файлов .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>

Я изучил Сжатие шрифтов для использования в Интернете, но мне очень нужен мой сайт чтобы снова вернуться к ‹100 мс без ущерба для эстетики.

Я подумал об использовании чего-то вроде веб-шрифтов Google, но не смог найти ничего для азиатских шрифтов (возможно, Я плохо ищу?). Я также думал о кэшировании, но это лучше всего работало бы с чем-то вроде веб-шрифта, который я не могу найти. Я посмотрел на популярном корейском сайте, naver.com, и я думаю, что они просто используют шрифт Dotum (что довольно хорошо , но предполагается, что у пользователя есть Dotum).

CSS от навера:

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

Каков наилучший способ предоставления хорошего шрифта пользователям, которые хотят немного прочитать корейский текст? Я просто хочу лично иметь доступ к моему сайту, не дожидаясь целых 1,6 с лишним секунд, прежде чем появится какой-либо текст.

(Мне тоже интересно, что делать с французским, но это уже другой вопрос)


css webfonts font-face web-standards page-load-time
person JDong    schedule 31.07.2014    source источник
comment
Разместите это здесь: Библиотека обнаружения шрифтов< /а>   -  person JDong    schedule 07.08.2014
comment
Посмотрите, есть ли в раннем доступе Google какие-либо шрифты, которые соответствуют вашим потребностям.   -  person davidcondrey    schedule 28.09.2014

Ответы (1)


arrow_upward
1
arrow_downward

Почти любой шрифт, который вы включаете, подтолкнет вас к вашим характеристикам скорости. Позвольте мне предложить альтернативу.

  1. Установите Dotum в качестве шрифта по умолчанию.
  2. Проверьте, установлен ли Dotum в системе пользователя.
  3. При желании проверьте Helvetica и, возможно, Arial Unicode.
  4. Загрузите шрифт Noto, если у пользователя не установлен ни один из этих шрифтов.

Как тестировать

Официального API для определения того, установлен ли шрифт, не существует, но общее решение приведено в качестве примера здесь. По сути, вы устанавливаете фиктивный элемент с большим шрифтом (моноширинный шрифт популярен, но необязателен), настраиваете второй фиктивный элемент с желаемым шрифтом (используя моноширинный шрифт в качестве запасного варианта), а затем сравниваете ширину двух, чтобы увидеть, соответствует ли ваш размер шрифту. желаемый шрифт успешно загружен.

Вот его код, но вы можете найти похожие решения с небольшим поиском (многие из которых не используют 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, что позволяет быстро и легко изменять стиль на лету.

Немного о французском языке

Наконец, я не думаю, что вы столкнетесь с такими же проблемами, если захотите использовать французский текст. Расширенная латиница распространена повсеместно, а блоки кода Unicode, включающие комбинированные акценты, используемые во французском языке, включены в ряд шрифтов. Если вы особенно обеспокоены, вы можете включить любое количество облегченных шрифтов из Google Fonts или Typekit, которые включают расширенную латиницу и/или акцентные блоки.

person Ryan Mitchell    schedule 31.07.2014
comment
Отличный ответ, но какой взлом! Я реализую это позже сегодня, возможно, по-другому. - person JDong; 31.07.2014
comment
Я согласен, что взлом болезненный, но я не знаю другого способа обнаружения шрифтов. Если вы найдете один, пожалуйста, дайте мне знать. Надеюсь, поможет! - person Ryan Mitchell; 31.07.2014