CSS3: есть ли способ изменить высоту шрифта? - PullRequest
0 голосов
/ 01 февраля 2011

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

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

Я перебираю вопросы здесь, посвященные Stackoverflow, и обнаружил, что CSS 2.1 не поддерживает взаимодействие разработчиков с высотой отображения шрифта.

Что мне было интересно, есть ли какие-нибудь будущие модули CSS3 или даже скрипты jQuery и т. Д., Которые могли бы помочь вручную сократить высоту шрифта?

Или есть какие-нибудь технологии замены шрифтов, которые позволяют это? Например, есть ли способ сократить заголовки Cufon?

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 01 февраля 2011

Есть способ, если вы будете использовать функцию замены шрифта, которая производит замену Canvas, как упомянутое вами Cufon.

Если вы это сделаете, вы сможете воспользоваться преимуществом свойства html canvas, которое заключается в том, что при измененииширина / высота холста с CSS холст будет вести себя как изображение, поэтому вы можете установить каждый элемент на 20% короче.Хотя вам придется запустить на нем javascript, как если бы вы хотели, чтобы он оставался с той же шириной, вы должны установить ширину, которая будет точно такой же, перед применением более короткой высоты.Если вы пропустите этот бит, вы масштабируете холст как по высоте, так и по ширине.

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

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

Удачи!Оставаться верным своему дизайну может быть сукой хе-хе

1 голос
/ 01 февраля 2011

Вы можете применить CSS-преобразование к вашему текстовому div и масштабировать его на 0,8 в Y

-webkit-transform: scaleY (0.8)

рендеринг может быть немного непредсказуемым.

...