Почему мои ограничители отключены при использовании CSS @ font-face?

Я использую API веб-сайтов Google для встраивания Droid Sans на странице. Все нормально, за исключением десендеров (т. Е. Бит dangly на y, g и т. Д.). Последние версии Firefox, IE и Chrome в моем окне Windows Vista все снижают.Почему мои ограничители отключены при использовании CSS @ font-face?

<!DOCTYPE html> 
<html> 
<head> 
<title>Droid sans descender test</title> 
<meta charset="utf-8"> 
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
    body { font-size: 16px; font-family: "Droid Sans", sans-serif; } 
    h1, h2, h3 { margin: 1em 0; font-weight: normal; } 
    h1 { font-size: 2em; } 
    h2 { font-size: 1.5em; } 
    h3 { font-size: 1em; } 
</style> 
</head>  
<body> 
<h1>A bug ran under the carpet anyway</h1> 
<h2>A bug ran under the carpet anyway</h2> 
<h3>A bug ran under the carpet anyway</h3> 
</body> 
</html>

Приведенный выше код выглядит следующим образом:

Descenders getting cut off http://thinkdrastic.net/journal/wp-content/uploads/2010/06/descenders.png

Я попытался line-height, font-size, padding и т.д. безрезультатно. У меня был некоторый успех с font-size-adjust, но в последний раз, когда я проверял, это был только Гекко. Кто-нибудь знает об этом?

источник

2010-06-03 Olly Hodgson

Прекрасно работает на MacOS WebKit. Вы пытались дать большую прибыль? –

Да. Я подозреваю, что это будет один из тех, что «как раз то, как Windows делает вещи». –

Это может быть просто ошибка копирования, но «font-family:« Droid Sans »sans-serif;' нужна запятая. – kevingessner

С некоторой помощью от @adamliptrot я обнаружил, что Descenders Droid Sans абсолютно прекрасен при нескольких точных размерах пикселей: 18, 22 и 27 пикселей. Я настроил мой эм соответствующим образом:

h1 { font-size: 1.6875em; } 
h2 { font-size: 1.375em; } 
h3 { font-size: 1.125em; }

Не идеально, но это работает:

The descenders work! http://thinkdrastic.net/journal/wp-content/uploads/2010/06/fixed-descenders.png

источник

2010-06-03 16:35:07

Это, вероятно, означает, что вещи снова не сработают при любом масштабировании или на экране нестандартного разрешения. –

Кажется, что он отлично работает при различных уровнях масштабирования. Учитывая, что это только незначительный визуальный глюк, который происходит только в Windows, и в этом случае это интрасеть с довольно однородной аппаратной настройкой, я тоже не слишком * волнуюсь. Конечно, что-то, на что нужно следить, хотя :) –

Если бы такая же проблема с шрифтом «Walkway» и магии 1.6875em работала для этого тоже ... странная систематическая ошибка – Andiih

Я проверил ссылки на файлы ttf, и даже в средстве просмотра шрифтов Windows сокращаются. Скорее всего, проблема с шрифтом, который обслуживается, а не с вашими стилями.

источник

2010-06-03 14:52:12 Soumya

Так они и делают. Интересно, если это проблема с шрифтами или с визуализацией шрифтов Windows? –

мы были с той же проблемой ... мы пытались использовать белки шрифта. мы попытались использовать веб-шрифты Google. Шрифт продолжал отрезать «висящие» буквы, такие как g. Кроме того, версия, размещенная в google, не отображалась как истинная и понятная, как другие. Шрифт казался немного изменчивым.

Наше решение:

Мы принимали шрифт сами без его форматировании для Интернета. Затем мы преобразовали файл ttf в файлы svg, .eot и .otf и загрузили их как наши исправления для ie и mozilla и т. Д.

источник

2011-12-16 06:27:07 mastawebb

Хотя ваш вопрос касается API веб-шрифтов Google, принцип мой ответ ниже - то же самое.

Если потомки отключаются при обслуживании шрифта TrueType, наиболее вероятной причиной является то, что метрики OS/2 неправильно установлены (отрицательно) на шрифт.

Значения, которые могут потребоваться для настройки, - WinAscent & WinDescent.

быстрый и грязный исправить было бы настроить эти как 0.

Это может быть сделано с помощью Font Forge. После того, как шрифт открывается в FontForge, вы можете получить доступ к этим параметрам через диалог «Font Info».

источник

2012-05-10 13:41:08 uniquelau

Это, похоже, не работало для меня. Я успешно изменил эти показатели в fontforge, но проблема не устранена. – wprater

Можете ли вы отправить мне шрифт, я посмотрю, почему это не работает. – uniquelau

Это просто помогло мне найти проблему с шрифтом, который я создал с MyScriptFont.com. Показатель OS/2 был настроен на неправильное значение. Спасибо. – Urs

Если кончик в верхней - изменение размера шрифта до ....

h1 { font-size: 1.6875em; } 
h2 { font-size: 1.375em; } 
h3 { font-size: 1.125em; }

не работает для вас, а затем добавить «высоту строки» для элемента, отрезав подстрочные ,``

источник

2012-05-31 14:19:58 chaser7016

Интересно. 'line-height' не работал для меня вообще, но некоторые размеры пикселей делали. Эти размеры 'em' могут быть не совсем правильными для вас, если ваш размер базового шрифта отличается. –

Если вы используете Font Squirrel, кажется, проблема с вариантом sans была отсортирована, но проблема остается с вариантом серины Font Squirrel.

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

Нажмите переключатель «Эксперт», оставьте все настройки, но в разделе «Дополнительные параметры» измените значение «Em Square Value» на «2162» и сгенерируйте шрифт.

Это делает шрифт должным образом на все размеры

источник

2013-04-12 16:29:11

Это не решило это для меня. У меня была проблема с 14.8-15.2 px (IE)/15.0 - 15.1 px (Chrome, Firefox) с Open Sans. Даже после установки значения em square с 2048 до 2162 эта проблема сохранялась. Возможно, попытка даже больших ценностей могла бы сработать, но я полагаю, что я предпочел бы просто избежать проблемного диапазона. –

-2

У меня была аналогичная дилемма и высота линии затруднительное работал для меня (то есть я добавил этот код в разделе Пользовательские CSS):

h2 { line-height: 140%; }

источник

2014-12-23 22:32:17

Я просто угадываю здесь, но у меня была такая же проблема, когда шрифты заменялись. Мне просто интересно, если это происходит, когда говорят, что замена шрифта заменяет шрифт 1024em шрифтом 1000 или наоборот. У меня было какое-то крупное сокращение с помощью шрифта 2048em. Возможно, стоит исследовать.

источник

2016-02-20 02:02:14 Beathoven

Почему мои ограничители отключены при использовании CSS @ font-face?

ответ

Смежные вопросы