Intereting Posts

Левое пространство на первой букве CSS

Я использую шрифт Google «Lato», и у меня возникают проблемы с правильной ориентацией заголовка и текста слева. Шрифт (когда большой), как представляется, имеет пространство ядра на первой букве и не выравнивает его без пробела! ?

Образ проблемы кернинга на первой букве отчёта

Так вот и скрипка:

Hello

Hello, this is sentance

FIDDLE

Кроме того, добавление отрицательного значения в margin-left (magin-left: -10px) просто похоже на ужасное обходное решение … и это не будет работать в целом для разных размеров шрифта, если индивидуально не отрегулировать по мере необходимости … угрюмый там должно быть лучшим решением?

Может ли кто-нибудь помочь?

Хорошо, все, кто говорит, что это связано с автоматическим заполнением или полями из-за того, что строка является заголовком, неверна. См. Эту скрипку в качестве доказательства:

http://jsfiddle.net/w25j9L7o/26/

Ведущее пространство не отображается браузером или CSS или чем-либо еще на уровне DOM / Browser. Это шрифт. У глифа H есть встроенная прокладка вокруг него, и чем больше размер шрифта, тем заметнее будет отступы.

Даже если вы используете отрицательные поля для компенсации:

  1. Сам символ смещается, что включает пустое пространство, так что пустое пространство также будет скользить, влияя на макет. Видимый символ не скользит в пустое пространство, весь символ (видимый и невидимый) смещается влево, если вы используете CSS для его исправления.

  2. Вам нужно будет отрегулировать это смещение на основе размера шрифта или определить базовый процент, чтобы смещение увеличивалось с любым набором шрифтов.

Или вы можете просто использовать другой шрифт, который не имеет этого признака.

Попробуйте использовать первую букву

 h1:first-letter { margin-left: -10px } 

http://jsfiddle.net/w25j9L7o/1/

Белое пространство есть, потому что это заголовок. Вы можете выровнять его влево, выполнив:

 margin-left: -10px; 

Вы можете использовать шрифт Gill Sans. Он очень похож на Lato. Проблема заключается в том, что сам шрифт Lato не находится в Css.

Вот ваша ссылка для GillSans

Вы можете получить kern.js с kernjs.com и отредактировать свой кернинг на передней панели, как они сказали на своем веб-сайте: «нажмите и перетащите, чтобы настроить кернинг, высоту строки, размещение букв. Когда вы закончите, скопируйте созданный CSS и используйте это в вашей собственной таблице стилей ”

Эта проблема сводила меня с ума, поэтому вот элегантное решение, которое использует :: селектор с первой буквой. Например, я смог исправить проблему с интервалом, добавив:

 #yourDiv::first-letter {margin-left:-5px;} 

Надеюсь, это работает для других, которые были в моей ситуации. Вот ссылка для получения дополнительной информации: http://www.w3schools.com/cssref/sel_firstletter.asp

В этом случае блоки PX не являются таким хорошим выбором. Я рекомендую использовать модуль EM, если вы работаете с атрибутами шрифта, такими как высота строки и т. Д. Потому что он автоматически рассчитывается для каждого размера шрифта. Он должен выглядеть так:

 #yourDiv::first-letter { margin-left: -0.12em; } 

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

Лучший способ решить это – установить все поля и прокладки на тегах html и body на 0:

Добавьте этот CSS:

 html,body { font-family:Lato; margin:0px; padding:0px; } p{margin-left: 11px;} 

DEMO