Разный перевод шрифтов Google, если добавлена ​​ссылка @ font-face или стандартная таблица стилей?

Question

Я не знаю, как это возможно ... Существует другой рендеринг, если я использую шрифты google с @font-face (созданный с помощью localfont.com), или если я использую стандартную таблицу стилей link (загрузка с сервера google).

Отказ от стандартного «пути» лучше, чем шрифт, добавленный шрифтом-шрифтом (файлы на mh-хосте). Я пробовал только с firefox. Как это возможно?

Я предпочитаемый @ шрифт лица, потому что считает, что это лучше для Perfomance, но это не очень хорошая идея, если рендеринг будет некрасиво ...

Я надеюсь, что вы можете мне помочь. Извините за мой английский и большое спасибо! :)

Answer 1

Это возможно. Рендеринг может отличаться в зависимости от формата шрифта. Используя это:

<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'> 

дает (более или менее, оно изменяется в зависимости от браузера) этой таблицы стилей:

@font-face { 
    font-family: 'ABeeZee'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('ABeeZee'), local('ABeeZee-Regular'), url(https://fonts.gstatic.com/s/abeezee/v9/TV7JXr7j4tW7mgYreANhGQ.woff2) format('woff2'); 
} 

С другой стороны, таблица стилей из localfont является:

@font-face { 
    font-family: 'ABeeZee'; 
    font-weight: 400; 
    font-style: normal; 
    src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot'); 
    src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot?#iefix') format('embedded-opentype'), 
     local('ABeeZee'), 
     local('ABeeZee-regular'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.woff2') format('woff2'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.woff') format('woff'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.ttf') format('truetype'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.svg#ABeeZee') format('svg'); 
} 

Этот второй css имеет шрифт во многих форматах, и браузер будет использовать первый, который он может понять, который может быть не тот, который используется в другом css.

С другой стороны, сам файл шрифта может быть другим, ABeeZee загружен с localfont (прямо сейчас) размером 13 КБ, но из Google это 17 КБ. Поскольку они не являются одним и тем же файлом, вы можете ожидать разные результаты.

Answer 2

Возможно, вам потребуется настроить способ визуализации шрифта с использованием свойства css text-rendering. Это может сильно повлиять на внешний вид шрифта.

Цитируется из этого article на CSS-уловок:

авто (по умолчанию) - браузер делает обоснованные предположения о том, когда для оптимизации скорости, разборчивости и геометрической точности при рисовании текста. Имейте в виду, что разные браузеры интерпретируют это значение по-разному.

p { 
    text-rendering: auto; 
} 

optimizeSpeed ​​ - браузер делает акцент на скорость рендеринга более разборчивости и геометрической точности при рисовании текста. Это отключает кернинг и лигатуры.

p { 
    text-rendering: optimizeSpeed; 
} 

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

p { 
    text-rendering: optimizeLegibility; 
} 

geometricPrecision - браузер подчеркивает геометрическую точность по скорости рендеринга и разборчивости. Некоторые аспекты шрифтов, такие как кернинг-не масштабируются линейно, поэтому geometricPrecision может сделать текст с использованием этих шрифтов хорошим. Когда шрифт SVG масштабируется, браузер вычисляет размер пикселя, а затем округляет его до ближайшего целого. Свойство geometricPrecision позволяет увеличить масштаб жидкости. Примечание. Только эти браузеры используют только текущие значения, Gecko обрабатывает значение точно так же, как optimizeLegibility.

p { 
    text-rendering: geometricPrecision; 
} 

Надеюсь, это поможет.