Другой рендеринг шрифтов Google, если добавляется с помощью ссылки @font-face или стандартной таблицы стилей?

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

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

Я предпочел @font-face, потому что думаю, что это лучше для производительности, но это не очень хорошая идея, если рендеринг будет уродливый...

Я надеюсь, что вы сможете мне помочь. Извините за мой английский и большое спасибо! :)
2 5
css google-font-api fonts firefox

2 ответа:

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

<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 (прямо сейчас) размеры 13KB, но из Google это 17KB. Поскольку это не один и тот же файл, вы можете ожидать разных результатов.

5

Вам может потребоваться настроить способ отображения шрифта с помощью свойства css text-rendering. Это может иметь большое влияние на то, как на самом деле выглядит шрифт.

Цитирую из этой статьи о css-трюках:

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

p {
  text-rendering: auto;
}

OptimizeSpeed - браузер подчеркивает скорость рендеринга над удобочитаемостью и геометрической точностью при рисовании текста. Он отключает Кернинг и лигатуры.

p {
  text-rendering: optimizeSpeed;
}

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

p {
  text-rendering: optimizeLegibility;
}

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

p {
  text-rendering: geometricPrecision;
}

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

1