Подтвердить что ты не робот

Встроенное дополнение/маржа в шрифтах

Кажется, что все шрифты имеют встроенную прокладку или маржу. Установив:

margin: 0px;
padding: 0px;

Вы никогда не получите то, что хотите. Кто-нибудь знает, почему это?

4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, проблема, с которой вы сталкиваетесь, связана не с CSS, а с самим шрифтом. Большинство шрифтов определяют базовый уровень, высоту x и высоту строки из коробки. Вероятно, ваша конкретная проблема связана с шрифтом leading, пробелом между строками. Иногда эти значения могут быть дико непоследовательными. Если вы действительно пытаетесь правильно настроить конкретный шрифт, я бы рекомендовал взглянуть на FontLab и отредактировать глифы/базовую линию/высоту строки для с конкретным шрифтом, с которым вы работаете.

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

Обновление

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

Браузер Reset: каждый браузер задает состояния по умолчанию для многих зарезервированных тегов HTML, таких как a и strong. Существуют и другие параметры, определенные по умолчанию, включая шрифты, высоту строк, вес и размеры. Это может повлиять на рендеринг шрифта. Как правило, это локализуется для определенных браузеров. Таким образом, используя CSS reset, вы можете исключить проблемы рендеринга по умолчанию в браузерах. Эрик Мейерс Reset является хорошим reset, но есть определенно другие. Попробуйте использовать разные, чтобы увидеть, какие из них лучше всего подходят для вас.

Однако, CSS сбрасывает работу, ориентируясь на все браузеры и устанавливая их для всех одинаковыми. Некоторые люди предпочитают использовать что-то, что вместо этого предназначено только для проблем с каждым браузером. То есть Normalize будет лучше.

Есть также проблемы, которые CSS reset не будет исправлять. Такие как псевдонимы шрифтов (что делает шрифты кажущимися гладкими, а не зубчатыми). Поскольку некоторые браузеры и операционные системы не добавляют сглаживание шрифтов, вы также увидите различия ширины символов. Это, к сожалению, неизбежно в большинстве случаев. Некоторые люди идут по пути использования инструмента замены шрифтов, например Cufon или Sifr. У этого тоже есть собственный список проблем (например, FOUC).

Другое обновление

Еще одна проблема, которая до сих пор существует, связана с проблемой кернинга или пространства между глифами. Существует свойство CSS letter-spacing, которое позволит вам делать глобальное ядро ​​на блоке текста, но у него нет возможности настраивать отдельные глифы, такие как Photoshop или InDesign, Кернинг также основан на целых пикселях, поэтому вы ограничены тем, чего вы можете достичь. Он также имеет проблемы с IE и не так надежен, как хотелось бы. Существует javascript под названием kerningjs, который довольно приличный, но он также основан на целом пикселе и поэтому не столь точным, как растрированный текст.

В целом за последние несколько лет шрифты в Интернете стали лучше. К сожалению, мы все еще имеем дело с проблемами из прошлого, когда шрифты предназначены только для печати или растрирования. Однако есть надежда на горизонты для энтузиастов шрифтов. Как сказал @allcaps, спецификация CSS3 для linebox, это только вопрос времени, пока это не будет принято!

Ответ 2

Причины этой особенности компьютерных шрифтов в основном исторические. Раньше шрифты были наборами маленьких металлических блоков с одним символом на каждом, а высота этих блоков должна была быть достаточной, чтобы содержать все элементы любого персонажа, включая потомков, потомков и диакритических знаков. Типографская традиция определила размер шрифта как высоту таких металлических блоков. Вот почему почти все фактические персонажи обычно намного меньше визуально, чем размер шрифта, установленный для текста, и над ним и над ним есть некоторое свободное пространство.

Вот хорошая статья, объясняющая исторические корни основных типографских измерений: http://www.dev-archive.net/articles/typograph1-en.html#Ch22

Ответ 3

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

/*use line-height*/
.font{
line-height: 1px; 
letter-spacing: 1px;
}

или использовать пользовательский css......

  h1{margin:1px 0;}
    h2{margin:1px 0;}
    h3{margin:1px 0;}
    h4{margin:1px 0;}

, используя эти css перед использованием reset css.......

Ответ 4

x ov gjqpy bdfhklt CAPS ÂÊÁËÈ

Глиф предназначен для двумерного холста. Для латинской системы записи высота этого холста согласована, и ширина может меняться. Символы помещаются на базовой линии. x находится на базовой линии, а вершина x определяет x-height. Округлые и заостренные фигуры выглядят меньше, поэтому оптически исправляются. Оценщики распространяются ниже базового уровня. Ascenders, capitals идут выше x-height. Браузеры выравнивают текст с разными шрифтами (в том же абзаце) по базовому уровню.

Так почему же сборка по марже? Символы должны иметь пробелы вокруг друг друга.

Что мы можем сделать, чтобы повлиять на эти поля?

  • Выберите шрифты с умом.
  • Укажите высоту строки p { line-height:0.5EM;}.
  • Смещение базовой линии .shift { top:-.5em; position:relative; }
  • И ждите модуль CSS3: строка.

Общие рекомендации: не самостоятельно настраивать шрифт, если вы не уверены, что делаете. Это намек на одно из многих вещей, с которыми вы столкнетесь. Windows нуждается в намеках на шрифты, и намек трудно понять. Также, как загружаются шрифты (@font-face), загружается локальная копия, если она существует. Вы можете отключить локальные шрифты с помощью взлома. Ваш пробег может отличаться.

Ответ 5

"Заполнение" в верхней и нижней части шрифтов по существу является зарезервированным пространством для диакритики (https://en.wikipedia.org/wiki/Diacritic). Некоторые скрипты стекают несколько диакритических знаков на некоторые буквы, включая капители (например, вьетнамский https://en.wikipedia.org/wiki/Vietnamese_alphabet), поэтому дизайнер шрифтов, который забывает зарезервировать место для они не смогут продлить шрифт позже. Кроме того, горизонтальные скрипты требуют некоторого разделения (ведущего) между строками для чтения.

Только очень специфичные глифы, такие как элементы рисования коробки, распространяются до пределов глифной коробки http://www.unicode.org/charts/PDF/U2500.pdf Это также объясняет, почему "набивка" встроена в каждый символ. Если бы это было внешнее свойство, невозможно было бы различать глифы, предназначенные для совместного использования, и глифы, которые нуждаются в некотором разделении (другими словами, количество прописных букв - это свойство глифа не имеет свойства целостного шрифта).

В следующем примере требуется хороший шрифт с достойным охватом Unicode (http://dejavu-fonts.org/ работает)

Элементы для рисования с комбинированной коробкой
↓
┃ÇŖŞ
┃ẤỄǛȰ┃U ← Вам действительно нужно включить "дополнение" для выравнивания с чертежами ящиков ↑
Латинские столицы с несколькими диакритиками (действительно переполнены)

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

(см. также http://www.webfonts.info/node/330 для информации об осложнениях, добавленных форматами шрифтов компьютера)

fonts opentype text-rendering

Ответ 6

Если вы хотите использовать пробел между строками в абзаце, вы можете использовать:

line-height: 3px; /*3px is an example*/

Или, если вы используете пробел между буквами, вы можете использовать:

letter-spacing: -2px;

Объятия, Vin.

Ответ 7

Это не проблема с шрифтом как таковым. Да, как сказал @matthew, сам дизайн шрифта имеет встроенный символ. Например, проверьте разницу между семьей "Сего" и семьей "Вердана". Вы будете продолжать перезагрузку css, если вам нужно использовать оба. Один стиль не будет работать.

Большая часть проблемы заключается в том, как различные браузеры отображают даже на одной и той же ОС. Черт, даже разные версии IE визуализируются по-разному. ClearType, Anti-aliasing, сглаживание шрифтов, рендеринг программного обеспечения вместо рендеринга графического процессора, самого механизма рендеринга и т.д. И т.д., Все они играют свою роль, чтобы убедиться, что вы не получите идеального дизайна по всем браузерам во всех ОС.

ClearType пытается выровнять с пиксельной сеткой, вызывая еще один набор проблем с незначительными различиями в высоте.

Эта ссылка очень старая, но очень актуальная: http://www.joelonsoftware.com/items/2007/06/12.html

См. также: http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html

См. также: https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers

См. также: Различия между шрифтами CSS между браузерами

Лучше всего было бы продолжать возиться с css, пока не приблизитесь достаточно.

Ответ 8

Вот мое мнение

  • Поля - это расстояние от каждой стороны до соседнего элемента, а свойство поля может быть установлено для верхнего, левого, правого и нижнего элементов элемента.
  • padding - это расстояние между границей элемента HTML и содержимым внутри него.

Но в вашем случае вам действительно не нужны эти оба вас, поскольку вас интересует интервал шрифта, есть одно свойство css, называемое буквенным интервалом

  • Свойство letter-spacing увеличивает или уменьшает пробел между символами в тексте

Попробуйте

 h2 {letter-spacing:-3px}

Свойство letter-spacing поддерживается во всех основных браузерах.

Примечание. Значение "inherit" не поддерживается в IE7 и ранее. Для IE8 требуется! DOCTYPE. IE9 поддерживает "inherit".

Ответ 9

Внутренние поля для текстовых элементов следующие (по крайней мере, в Firefox и Chrome):

Рабочий пример

 p{margin:16px 0;}
h1{margin:21px 0;}
h2{margin:19px 0;}
h3{margin:18px 0;}
h4{margin:21px 0;}
h5{margin:22px 0;}
h5{margin:24px 0;}

Чтобы удалить их, вам необходимо повторно установить маркер следующим образом:

p, h1, h2, h3, h4, h5, h6{margin:0;}

Ответ 10

Посмотрев на источник html html-документа, выяснилось, что после обычного поля/дополнения, добавленного всеми браузерами, хром по умолчанию добавляет свои собственные свойства webkit margin/padding.

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

Решение вместо обычного

*{
margin:0;
padding:0;
}

Добавьте стиль с помощью

*{
margin:0;
padding:0;
-webkit-margin-before:0;    
-webkit-margin-after:0;
}

Поскольку -webkit-margin-start и -webkit-margin-end уже установлены на 0px, здесь нет необходимости их устанавливать.

Скажите, если это сработает!:)

Ответ 11

Я думаю, кернинг, который вы собираетесь описать

взгляните на эту библиотеку

http://kerningjs.com/

CSS, встречайте кернинг. Кернинг, встретите CSS. Керн, стиль, преобразование и масштабируйте свой веб-тип с помощью настоящих правил CSS.

У дизайнеров печати было слишком просто. Это 2012 год; веб существует уже более двух десятилетий, но веб-дизайнеры не получают полный контроль над их типографикой? Забудьте об этом, используйте Kerning.js!

бесплатно

Ответ 12

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

Проверьте эту страницу, так как она даст вам более полное представление о том, как отредактировать шрифт: http://mashable.com/2011/11/17/free-font-creation-tools/

Ответ 13

Я часто сталкиваюсь с одной и той же проблемой, особенно при попытке получить текст для выравнивания с чем-то рядом с ним, который не является текстом, например изображением.

Здесь у меня был некоторый успех. Выберите часть текста, чтобы за ним появился цветной фон. В верхней части выделения выделяется то, что шрифт считает "вершиной" и "нижней" буквы. Сделайте скриншоты шрифта разных размеров и разных браузеров. Увеличьте масштаб захвата экрана в Photoshop и подсчитайте количество пикселей от того, что, по вашему мнению, должно "быть" верхним и фактическим. Вычислите процентное количество пикселей в пределах всей высоты выбора.

Затем установите отрицательное верхнее поле в тексте в ems, которое равно проценту от "переполнения". Так что если текст должен быть 10px высотой, а он на самом деле ростом 12px, тогда дайте ему отрицательный верхний край -0.2em.

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

Ответ 14

Как насчет сброса поля и значения заполнения до нуля во всех

*{
  margin: 0;
  padding: 0;
}

Ответ 15

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

HTML

 <div class="relative">
     <div class="webfont">&#10004</div>
 </div>

CSS

 .relative { position:relative; }
 .webfont {  position: absolute;

             top: -5px; 
             left: -5px; /* easier control with these values */
           }

Это выглядело как лучший способ контролировать вещи через браузер, а не сказать, используя положительные/отрицательные поля и прокладки.

Предоставляя текстовый блок контейнеру и классу, у нас есть намного более чистая способность настраивать его перекрестный браузер. (ИМО).

Может быть что-то там.

Приветствия,

Rob

Ответ 16

Вы можете сделать это с помощью line-height

Я знаю, что это не слишком распространено в HTML5 и больше HTML4.1, но...

<font style="line-height: 5px;">

и если это действительно так важно:

<font style="padding: 5px;">L</font>
<font style="padding: 5px;">o/font>
<font style="padding: 5px;">r</font>
<font style="padding: 5px;">e</font>
<font style="padding: 5px;">m</font>