Я використовую google webfonts, і вони чудово підходять для дуже великих розмірів шрифту, але в 18px вони виглядають жахливо. Я тут і там читав, що є рішення для згладжування шрифту, але я не знайшов жодного, де це було б чітко пояснено, і декілька знайдених фрагментів взагалі не працюють.

Моє h4виглядає жахливо майже в кожному браузері, але Chrome - найгірший. У Chrome майже всі мої шрифти виглядають жахливо.

Чи може хтось вказати мені в правильному напрямку? Можливо, ви знаєте ресурс, який це чітко пояснює? Дякую!

ПРИКЛАД ЕКРАНА №1

Цей скріншот показує домашню сторінку https://www.dartlang.org/ , мову програмування, яку створив Google (тому ми можемо мати на увазі, що цей веб-сайт також створений Google) та використовує веб-шрифти Google.

Знімок екрана показує Google Chrome зліва, Firefox / Internet Explorer праворуч .:

ПРИКЛАД ЕКРАНА №2

Цей знімок екрана показує сторінку інформації про продукт на Adobe.com за допомогою веб-шрифтів, наданих Typekit. Adobe & Typekit - це професіонали, що стосуються шрифтів.

Знімок екрана показує Google Chrome праворуч, Firefox / Internet Explorer зліва:

Статус випуску, червень 2014 року: Виправлено за допомогою Chrome 37

Нарешті, команда Chrome випустить виправлення цієї проблеми із Chrome 37, яке буде опубліковано у липні 2014 року. Дивіться приклад порівняння поточного стабільного Chrome 35 та останнього Chrome 37 (попередній попередній перегляд) тут:

Статус випуску, грудень 2013 року

1.) НІ правильне рішення при завантаженні шрифтів через @import, <link href=або Google, webfont.js. Проблема полягає в тому, що Chrome просто вимагає .wff файли з API Google, які видають жахливо. Дивно, але всі інші типи файлів шрифтів виглядають чудово. Однак є деякі CSS-трюки, які трохи "розгладять" виведений шрифт, ви знайдете вирішення завдань глибше в цій відповіді.

2.) Є справжнє рішення для цього при самостійному розміщенні шрифтів, вперше розміщеному Хайме Фернандесом в іншій відповіді на цій сторінці Stackoverflow, яка виправляє цю проблему, завантажуючи веб-шрифти в спеціальному порядку. Мені буде погано просто скопіювати його відмінну відповідь, тому, будь ласка, подивіться там. Існує також (недоведене) рішення, яке рекомендує використовувати лише шрифти TTF / OTF, оскільки їх зараз підтримують майже всі браузери.

3.) Команда розробників Google Chrome працює над цим питанням. Оскільки в двигуні візуалізації відбулося декілька величезних змін, очевидно, щось відбувається.

Я написав велику публікацію в блозі з цього питання, сміливо дивіться: як виправити некрасиве відображення шрифту в Google Chrome

Відтворювані приклади

Дивіться, як виглядає приклад із початкового питання сьогодні в Chrome 29:

ПОЗИТИВНИЙ ПРИКЛАД:

Зліва: Firefox 23, праворуч: Chrome 29

ПОЗИТИВНИЙ ПРИКЛАД:

Вгорі: Firefox 23, знизу: Chrome 29

НЕГАТИВНИЙ ПРИКЛАД: Chrome 30

НЕГАТИВНИЙ ПРИКЛАД: Chrome 29

Рішення

Виправлення наведеного вище скріншоту за допомогою -webkit-text-stroke:

Перший рядок за замовчуванням, другий:

-webkit-text-stroke: 0.3px;

Третій ряд:

-webkit-text-stroke: 0.6px;

Отже, спосіб виправити ці шрифти - це просто їх надання

-webkit-text-stroke: 0.Xpx;

або синтаксис RGBa (автор nezroy, знайдений у коментарях! Спасибі!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Існує також застаріла можливість : надайте тексту просту (підроблену) тінь:

text-shadow: #fff 0px 1px 1px;

Рішення RGBa (знайдено в блозі Джаспера Еспеджо):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Про це я написав блог:

Якщо ви хочете бути в курсі цього питання, ознайомтеся з повідомленням у блозі: як виправити некрасиве відображення шрифту в Google Chrome . Я опублікую новини, якщо є новини про це.

Моя оригінальна відповідь:

Це велика помилка в Google Chrome, і команда Google Chrome знає про це, дивіться офіційний звіт про помилки тут . Наразі, у травні 2013 року, навіть через 11 місяців після повідомлення про помилку, це не вирішено. Дивно, що єдиний браузер, який заблукає Google Webfonts - це власний веб-переглядач Google Chrome (!). Але є просте вирішення проблеми, яке вирішить проблему, див. Рішення щодо нижче.

ЗАЯВЛЕННЯ З КОМАНДИ РОЗВИТКУ ХРОМУ GOOGLE, травень 2013 року

Офіційна заява у коментарі звіту про помилку:

Активно працює над набором шрифтів Windows. ... Ми сподіваємось, що в межах однієї віхи або двох, що розробники можуть почати грати, мати щось. Як швидко це стає стабільним, як завжди, все залежить від того, наскільки швидко ми можемо викорінити та спалити будь-які регресії.

У мене була така ж проблема, і я знайшов рішення в цій посаді Сема Годдарда ,

Рішення, якщо визначити виклик шрифту двічі . Спочатку, як це рекомендується, використовуватись у всіх веб-переглядачах, а після певного дзвінка лише для Chrome із спеціальним медіа-запитом:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

За допомогою цього методу шрифт стане хорошим у всіх браузерах. Єдиний негативний момент, який я виявив, - це те, що файл шрифту також завантажується двічі.

Ви можете знайти іспанську версію цієї статті на моїй сторінці

Chrome не надає шрифти, як Firefox або будь-який інший веб-переглядач. Це, як правило, проблема в Chrome, яка працює лише в Windows. Якщо ви хочете зробити шрифти гладкими, використовуйте -webkit-font-smoothingвластивість для h4таких тегів yer .

h4 {
    -webkit-font-smoothing: antialiased;
}

Ви також можете використовувати subpixel-antialiased, це дасть вам різний тип згладжування (робить текст трохи розмитим / затіненим). Однак для перегляду ефектів вам знадобиться нічна версія. Ви можете дізнатися більше про згладжування шрифту тут .

Гаразд, ви можете використовувати це просто

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Переконайтеся, що ваш колір тексту та верхня ширина штриху тексту мають бути однаковими, і все.

Я перш за все скажу, що це не завжди спрацьовує , я перевірив це за допомогою sans-serifшрифту та зовнішніх шрифтівopen sans

Іноді, використовуючи величезні шрифти, намагаються наблизитись до font-size:49pxверхніх і вище

Це текст заголовка розміром 48 пікселів ( font-size:48px;у елементі, який містить текст).

Але якщо ви підняли на 48 font-size:49px;пікселів (і 50 пікселів, 60 пікселів, 80 пікселів тощо), щось цікаве станеться

Текст автоматично стає гладким і здається справді хорошим

Для іншого боку ...

Якщо ви шукаєте невеликі шрифти, ви можете спробувати це, але це не дуже ефективно.

До батьківського тексту просто застосуйте наступне властивість css: -webkit-backface-visibility: hidden;

Ви можете трансформувати щось подібне:

До цього:

(шрифт Kreon)

Вважайте, що коли ви не ставите це майно, -webkit-backface-visibility: visible;це спадщина

Але будьте обережні , що практика не дасть завжди хороших результатів, якщо ви уважно бачите, Chrome просто зробить текст трохи розмитим.

Ще один цікавий факт:

-webkit-backface-visibility: hidden;також буде працювати, коли ви трансформуєте текст у Chrome (із -webkit-transformвластивістю, що включає обертання, перекоси тощо)

Без -webkit-backface-visibility: hidden;

З -webkit-backface-visibility: hidden;

Ну, я не знаю, чому така практика працює, але це для мене. Вибачте за мою дивну англійську.