Големина на текст во CSS

Пример 1: Големина на текст во пиксели

Основната големина на текст е добар почеток, но за повеќето дизајнери и клиенти 16px (пиксели) е премногу голем текст. Во нашиот пример големината на текстот е намалена на 12px.

.text p { font-size: 12px; }

Резултатите покажаа дека Safari и Firefox можат да ја променуваат големината на текстот, но Internet Explorer (IE) 6 и 7 неможат. Во Opera и IE7 големината на текстот може да се менува користејќи ја зум алатката, која го зголемува текстот, сликите и изгледот на страната.

Пример 2: Големина на текст во em

Во овој пример за големината на текстот ќе користиме em. Ова е вистинска типографска единица препорачана од W3C. Користејќи ја основната големина од 16px, следниот стил ќе ни ја даде посакуваната големина:

.text p { font-size: 0.75em; } /* 16 x 0.75 = 12 */

Резултатот сега покажа дека во сите прелистувачи текстот се прикажа идентично. Големината на текст во em може да се променува во сите прелистувачи. Но, како и да е, IE6 и IE7 го зголемваат текстот неприфатливо.

Најчесто користени големини:

font-size:  1.125em /* 18 : 16 = 1.125 */
font-size: 1em /* 16 : 16 = 1.125 */
font-size: 0.875em /* 14 : 16 = 0.875 */
font-size: 0.75em /* 12 : 16 = 0.75 */
font-size: 0.6875em /* 11 : 16 = 0.6875 */
font-size: 0.625em /* 10 : 16 = 0.625 */

Пример 3: Големина на body тагот во проценти

Решение за претераното менување на големината во IE6 и IE7 е да ја внесиме големината на текстот во body тагот во проценти (%), притоа задржувајќи ја големината на содржината во em:

body { font-size: 100%; }
#content { font-size: 0.75em; }

Резултатите покажаа дека претераното менување на големината на текстот во IE6 и IE7 го нема, што значи, сега имаме текст кој се прикажува идентично во сите прелистувачи, а исто така и ја менува својата големина подеднакво секаде.

gravatar
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

2 Коментари

  1. fala Daniel ke mi bide od korist vaa strana.haha.pozz

  2. @Vane

    Се надевам дека ќе ти користи.