#html #css #fonts
Вопрос:
Шрифт (ProggyCleanSZBP.ttf с версии 1.1.5) периодически жирный/размытый. Сравнить https://vonunov.nu/ с https://vonunov.nu/c/aws/free-tier/ — последнее в основном соответствует желанию, но вы можете видеть, что проблема возникает в некоторых местах, например, в первом элементе списка в верхней части страницы.
Это происходит в Chrome и в LibreWolf, который, я думаю, использует Goanna.
Я пробовал эти вещи, и они, похоже, не вызывают никаких изменений после принудительной перезагрузки с помощью ctrl-shift-R:
-webkit-font-smoothing: antialiased;font-weight: normal;font-weight: 400;- Проверка HTML
- Проверка CSS
- Удалите различные элементы, чтобы посмотреть, не вызывает ли это что-нибудь
- Используйте консоль разработчика, чтобы убедиться, что не применяются неожиданные стили
- Переключитесь на ту же версию шрифта, но без жирной пунктуации
- Удалите весь вес шрифта, размер шрифта, высоту строки, интервал между буквами и оформление текста (я убрал «жирный текст» в одном месте, удалив a
<strong>в этом абзаце, следовательно, последние два изменения).
Некоторые из этих рекомендаций предназначены для решения проблем с аппаратным ускорением, но я не уверен, что это проблема. Я отключил аппаратное ускорение в LibreWolf и перезапустил приложение, но это не имело никакого значения.
Вопросы:
- Что еще я должен попытаться настроить или проверить?
- Является ли это проблемой, присущей использованию этого шрифта в Интернете? Я не уверен, что это предназначено для этого, но мне наскучила Безутешность.
- Что-то не так с моими глазами?
Я загрузил страницу в другое окно, чтобы провести параллельное сравнение, и это кажется несовместимым между ними, но чем больше я смотрю на это, тем более незначительной кажется разница.
Устраняю ли я оптическую иллюзию?
Обновление: Эта проблема вообще не имеет смысла, поэтому я пока сдаюсь. Для вашего развлечения, мои попытки изолировать причину:
- Изолируйте элемент на хорошей странице, который вызывает правильное отображение текста: текст перестает отображаться должным образом, когда я удаляю таблицу со страницы.
- Выделите соответствующую строку в таблице: это не привело к тому, что текст перестал отображаться должным образом (я удалял по одной строке за раз, но не возвращал их обратно).
- Скопируйте и вставьте по одной строке за раз из таблицы на плохую страницу: текст отображается правильно после добавления определенной строки.
- Что примечательного в этом ряду: Он содержит a
<strong>, который, как ранее считалось, влияет на эту проблему (но противоположным образом). Строка за две строки до этой уже содержит a<strong>. - Удалите все строки, кроме двух строк, которые содержат
<strong>: Текст больше не отображается должным образом. - Удалите одну или другую из этих строк: никаких изменений.
- Добавьте обратно строку, которая была между этими двумя строками: никаких изменений.
- Вернитесь к шагу 5, добавляя по одной строке за раз: текст начнет отображаться правильно после того, как я добавлю строку, содержащую
<th>элементы. - Удалите все строки, кроме трех строк, содержащих
<th>и<strong>: Текст больше не отображается должным образом. - Возврат: Текст отображается правильно после того, как я добавлю обратно строку, которая ничем не примечательна по сравнению с другими строками, которые не имели такого эффекта.
- Теперь есть четыре строки, присутствие которых привело к правильному отображению текста. Удалите все, кроме этих четырех: текст больше не отображается должным образом.
Обновление 2: Проблема возникает только тогда, когда страница слишком коротка для полосы прокрутки. Я думаю, я попробую отслеживать проблемы LibreWolf и посмотрю, находится ли она в области действия или они перенаправят ее.
Комментарии:
1. вы включили-webkit-внешний вид: нет; -moz-внешний вид: нет; с css для -webkit-сглаживание шрифтов: сглажено;? Также вы отметили соответствующий css как !важный?
2. Добавлены эти два-в настоящее время есть-webkit-сглаживание шрифтов: сглажено;-moz-osx-сглаживание шрифтов: оттенки серого; вес шрифта: 400;-webkit-внешний вид: нет; -moz-внешний вид: нет;. Добавлено !важно для всех. Убран вес шрифта. Никаких видимых изменений ни на каком этапе. Основываясь на другой информации, которую я нашел, похоже, что я должен быть в состоянии сделать все это в теле {}, верно? У моего p{} есть только высота строки, поля, семейство шрифтов и размер шрифта, поэтому я думаю, что ничто в ребенке не должно мешать. Удалена высота строки, без изменений. Размер шрифта составляет 100% (остался после тестирования — удален, без изменений).
Ответ №1:
Однажды у меня была аналогичная проблема с другим шрифтом, если вы импортируете его с помощью css, вам просто нужно протестировать вес каждого шрифта от 100 до 900, пока не увидите хорошие результаты.
@font-face {
font-family: 'My Font';
src: url('path/to/font.ttf');
font-weight: 900; /* test with values 100, 200, 300, ...900, at some point it will be fixed*/
font-style: normal;
}