CSS типография

CSS и HTML » CSS

Stalik   трудност:    видян: 5050

Измерване, размери и преоразмеряване

Тънкостите в използването на различни мерки за размерите на шрифтовете е сложен въпрос и е извън обсега на настоящата статия. Засега е достатъчно да знаете, че изборът на единица мярка за големината на шрифта може да окаже влияние върху това как ще се изобразява текста ви на различни платформи и през различни браузъри. Ако все пак сте заинтересовани от подробен анализ и обяснение хвърлете едно око на статията на Оуен Бригс за текстовото оразмеряване. Старичка е, но нещата са простичко обяснени.

На всичкото отгоре няма как да сте сигурни, че потребителите, които зареждат страницата ви, ще видят нещата точно така, както вие. Те могат да променят размера на шрифта както пожелаят и така драстично да променят идеята на подредбата. Добре е да вземете предвид тази възможност и да предвидите нещата максимално.

В този урок ще се осланяме на откритията на Оуен и ще вземем за основен размер на шрифта на body-то 76% и размер на пробела на абзаца - 1 em. Това трябва да се визуализира по приблизително еднакъв начин на повечето браузъри и да позволи на потребителите свободно да оразмеряват текста така, както намерят за добре.

Това, което е важно да запомните за емовете (em), е че те уеднаквяват елементите на текста. тоест, ако зададете параметър font-size както за тагът p, така и за тагът strong с размер, да речем, .9em, то думата “красива” в тага strong ще се визуализира като по-малка от заобикалящият я текст:

<p>Обичам <strong>красива</strong> типография!</p>

Получава се така, защото em е релативна величина и вътрешният таг с размер на шрифта е свързан не с документа, а с parent елемента. В показаният горе случай "красива" е .9 em свързано с .9-em на тагът на параграфа, който на свой ред е свързан с размерът на текста на бодито по подразбиране. Трябва да запомните, че задаването на по-малък размер на шрифта за елементите ще ги оразмери според parent елементът — не според документа.

Опциите на ваше разположение

Без използването на "майсторски" техники възможностите ви в онлайн типографията са крайно ограничени. Въпреки това имате няколко чудесни опции за подобряване четимостта и естетическият вид на текстовете си.

От всички възможности за подобряване типографията чрез CSS, line-height е една от най-важните. Браузърите се мъчат да настроят line-height заедно с промените в размера на шрифта, но не винаги успяват. Според размера на текста ви прибавянето или намаляването на междуредовото пространство може драстично да подобри четимостта. Внимателната употреба на word-spacing и letter-spacing може да има същият ефект или да се използва за подчертаване на фраза в текст.

При случаи в които искате да използвате само главни, само малки или капитализация на първата буква можете да се възползвате от text-transform. В добавка font-variant може да прави малки главни (small caps).

Друга практика, използвана предимно в печатарството, но не много популярна онлайн, е отстъпа в първият ред на нов абзац. В CSS опцията text-indent се грижи за това оформление.

Вероятно text-align не е нещо непознато за вас, но са малко хората, които използват justify опцията. Тя е полезна в няколко случая; например когато използвате тесни колони, като във вестник, тя помага да оформите по-добре аранжировката на страницата.

Макар да не са универсално поддържани все още, псевдо-елементите :first-letter и :first-line могат да ви помогнат да оформите абзаците си. Това, което трябва да запомните при псевдо-елемента за първа буква е, че можете да използвате float опцията, за да изведете елемент без да се влияе от останалата структура.

Хубавото при first-line опцията е, че думите, които са на първия ред, се определят автоматично. Ако размерът на текста се промени първият ред и ефектите ще се променят според думите, които се побират на първия ред.

Страници: «1 2 3 »