Смотрите также индекс из всех советов.
На этой странице:
Семейства шрифтов
После цвета шрифт, вероятно, является самым основным свойством страницы. На этой странице я не буду показывать никаких «хитростей», но я покажу диапазон вариантов шрифта, который позволяет CSS.
Поскольку не все шрифты доступны на всех компьютерах (есть тысячи шрифтов, и большинство из них не являются бесплатными), CSS предоставляет систему откатов. Сначала вы указываете нужный шрифт, затем любые шрифты, которые могли бы заполнить первый, если он недоступен, и вы должны завершить список общим шрифтом, которого есть пять: serif, sans-serif, monospace, cursive и фантазия.
В следующей таблице приведены примеры различных шрифтов (ваш браузер может знать не все из них), и вы можете увидеть, что ваш браузер делает с каждым из пяти общих:
Семейство шрифтов Ваш браузер Пример изображения 'sans-serif': обычные шрифты без засечек Arial, без засечек Quick Brown Fox перепрыгивает через ленивую собаку 
Helvetica, без засечек Quick Brown Fox перепрыгивает через ленивую собаку 
Вердана, без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Требушет М.С., без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Джилл Санс, без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Ното Санс, без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Авангард, TeX Gyre Adventor, URW Gothic L, без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Оптима, без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Arial Narrow, без засечек Быстрая коричневая лиса перепрыгивает через ленивую собаку 
sans-serif Быстрая коричневая лиса перепрыгивает через ленивого пса 'serif': обычные шрифты с засечками Times, Times New Roman, serif Быстрая коричневая лиса перепрыгивает через ленивого пса 
Дидот, засечка Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Грузия, засечек Быстрый Браун Фокс перепрыгивает через ленивую собаку 
Palatino, URW Palladio L, засечек Быстрый Браун Фокс перепрыгивает через ленивую собаку 
Bookman, URW Bookman L, serif Быстрая коричневая лиса перепрыгивает через ленивую собаку 
New Century Schoolbook, TeX Gyre Schola, засекречение Quick Brown Fox перепрыгивает через ленивую собаку 
Американская пишущая машинка с засечками Quick Brown Fox перепрыгивает через ленивую собаку 
serif Быстрая коричневая лиса перепрыгивает через ленивую собаку 'monospace': шрифты фиксированной ширины Andale Mono, monospace Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Курьер Нью, моноширинный The Quick Brown Fox перепрыгивает через ленивую собаку 
Курьер, моноширинный The Quick Brown Fox перепрыгивает через ленивую собаку 
FreeMono, моноспейс Быстрая коричневая лиса перепрыгивает через ленивую собаку 
OCR A Std, моноспейс Быстрая коричневая лиса перепрыгивает через ленивую собаку 
DejaVu Sans Mono, моноспейс Быстрая коричневая лиса перепрыгивает через ленивую собаку 
monospace Quick Brown Fox перепрыгивает через ленивую собаку «курсив»: шрифты, имитирующие почерк Comic Sans MS, Comic Sans, cursive Quick Brown Fox перепрыгивает через ленивую собаку 
Канцелярия Apple, курсив The Quick Brown Fox перепрыгивает через ленивую собаку 
Брэдли Хэнд, курсив The Quick Brown Fox перепрыгивает через ленивую собаку 
Brush Script MT, Brush Script Std, курсив Quick Brown Fox перепрыгивает через ленивую собаку 
Snell Roundhand, скоропись The Quick Brown Fox перепрыгивает через ленивую собаку 
URW Chancery L, курсив Quick Brown Fox перепрыгивает через ленивую собаку 
курсив Quick Brown Fox перепрыгивает через ленивую собаку 'fantasy': декоративные шрифты, для титулов и т. д. Impact, fantasy Quick Brown Fox перепрыгивает через ленивую собаку 
Luminari, фэнтези Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Chalkduster, fantasy Быстрая коричневая лиса перепрыгивает через ленивую собаку 
Джаз LET, фэнтези The Quick Brown Fox перепрыгивает через ленивую собаку 
Блиппо, фэнтези The Quick Brown Fox перепрыгивает через ленивую собаку 
Трафарет Std, фэнтези The Quick Brown Fox перепрыгивает через ленивую собаку 
Маркер Фетт, фэнтези The Quick Brown Fox перепрыгивает через ленивую собаку 
Траттателло, фэнтези The Quick Brown Fox перепрыгивает через ленивую собаку 
фэнтези быстрый коричневый лис перепрыгивает через ленивую собаку
Стили шрифтов
Большинство шрифтов имеют различные стили в пределах одного и того же семейства, как правило, жирный и курсив, часто также жирный курсив, несколько реже - маленькие заглавные буквы, а в некоторых случаях - сверхлегкие / особо жирные или растянутые / сжатые версии.
В таблице ниже показан ряд различных стилей. Если у вас нет очень богатой коллекции шрифтов, многие строки будут одинаковыми.
rule serif sans-serif Стили стиль шрифта: обычный Quick… Quick… стиль шрифта: курсив Quick… Quick… стиль шрифта: наклонный Quick… Quick… Вес шрифта: 100 Quick… Quick … Font-weight: 200 The Quick… Quick… font-weight: 300 Quick… Quick… Quick… font-weight: normal The Quick… Quick… font-weight: 500 The Quick… The Quick… font-weight: 600 Быстрый… Быстрый… шрифт-вес: жирный Быстрый… Быстрый… шрифт-вес: 800 Быстрый… Быстрый… Быстрый… шрифт-вес: 900 Быстрый… Быстрый… Варианты шрифт-вариант: обычный Быстрый… Быстрый … Вариант шрифта: маленькие заглавные буквы Quick… The Quick… стретч-растягивание шрифта: ультраконденсированное Quick… Quick… Quick-растяжение шрифта: сверхконденсированное Quick… The Quick… растяжение шрифта: сжатое Quick… The Quick… font-stretch: полуконденсированный Quick… Quick… font-stretch: обычный Quick… Quick… Quick… font-stretch: полуразвернутый Quick… The Quick… фон t-stretch: расширенный Quick… The Quick… font-stretch: сверхрасширенный Quick… The Quick… font-stretch: ультрарасширенный Quick… The Quick…
Модуль шрифтов CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые предоставляют несколько вариантов), в частности вариант шрифта свойство имеет гораздо больше значений.
Добавить комментарий!