Vrml’97 text, fontstyle (текст, стиль шрифта)


Содержание

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : font-style

Материал из WebWikiABCD

Содержание

Атрибут font-style | Свойство fontStyle

Задает стиль (начертание) шрифта текста: italic, normal или oblique.

Синтаксис

HTML
Скрипты [ sStyle = ] object.style.fontStyle

Используемые значения

sStyle Строка, которая устанавливает или принимает одно из следующих значений.

normal Значение по умолчанию. У шрифта обычное начертание.
italic У шрифта курсивное начертание.
oblique У шрифта наклонное начертание.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Свойство имеет значение по умолчанию normal. Атрибут Каскадных таблиц стилей (CSS) наследуется.

Замечания

Разница между курсивным и наклонным начертанием в том, что при курсивном имитируется рукописное написание текста (для этого используются специальные виды шрифтов), а при наклонном — обычные буквы шрифта принудительно наклоняются вправо.

Кроме того, в Internet Explorer есть настройка «Заданный по умолчанию шрифт» (default fontStyle). Для браузера можно определить каким шрифтом предпочтительнее отображать тексты.

Примеры

В примерах для изменения характеристик шрифта используется атрибут font-style и свойство fontStyle.

В первом примере используется атрибут font-style для задания написания всех заголовков третьего уровня (H3) курсивом.

Во втором примере рассматривается применение свойства fontStyle. Шрифт становится курсивным, при нажатии кнопки мыши на объекте (событие onmousedown)

Стандарты

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Стиль и размер текста в CSS

В прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов.

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size . Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style . Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style :

Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant . Оно принимает следующие значения:

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant :

Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight . Оно принимает такие значения:

font-weight: normal — обычный текст

font-weight: bold — жирный текст

font-weight: inherit — принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal , а число 700 значению bold . Но числа работают не со всеми шрифтами, а также они не работают в некоторых браузерах, поэтому они редко используются.

Добавим селектору #fo свойство font-weight :

Существует совойство font , в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке: стиль, вариант, ширина, размер, шрифт. Для примера добавим на страницу тэг и установим для него свойство font :

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family , можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег и установим ему свойство font , но по-другому:

Цвет текста

Цвет текста устанавливается с помощью свойства color . Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS. Для примера установим цвет тэгу , который мы создавали ранее. Добавим селектору #s2 свойство color :

Высота строки

Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство line-height . Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal — обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения, доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:

Попробуйте разные варианты высоты строки. Посмотрите как будет выглядеть текст.

Отступ первой строки

В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent . Значением этого свойства является отступ в единицах измерения, существующих в CSS.

Установим отступ большому абзацу. Для этого селектору #text добавим свойство text-indent :

Выравнивание текста

Выравнивание текста устанавливается с помощью свойства text-align . Оно принимает следующие значения:

text-align: left — по левому краю (по умолчанию)

text-align: right — по правому краю

text-align: center — по центру

text-align: justify — по ширине. Используется для текстов длинной более одной строки.

Добавим на страницу абзац и выравнем текст в нём по центру. Обратите внимание — выравнивается не сам элемент а текст внутри него:

Декорирование текста

Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration . Оно принимает такие значения:

text-decoration: none — без декорирования

text-decoration: underline — подчёркнутый текст

text-decoration: overline — надчёркнутый текст

text-decoration: line-through — зачёркнутый текст

text-decoration: inherit — значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

Коприрование материалов сайта возможно только с согласия администрации

Font Style Перечисление

Определение

Задает сведения о стиле, применяемые к тексту. Specifies style information applied to text.

Это перечисление имеет атрибут FlagsAttribute, который разрешает побитовое сочетание значений его элементов.

Текст, выделенный жирным шрифтом. Bold text.

Текст, выделенный курсивом. Italic text.

Стандартный текст. Normal text.

Strikeout 8

Текст с линией посредине. Text with a line through the middle.

Underline 4

Текст, выделенный подчеркиванием. Underlined text.

Примеры

В следующем примере кода показано, как задать Font для свойства кнопки новый шрифт с полужирным начертанием, FontStyle используя перечисление. The following code example demonstrates how to set the Font property of a button to a new bold-style font using the FontStyle enumeration. Этот пример предназначен для использования с Windows Forms. This example is designed to be used with Windows Forms. Создайте форму, содержащую кнопку с именем Button1, и вставьте в нее следующий код. Create a form containing a button named Button1 and paste the following code into it. Свяжите метод с Clickсобытиемкнопки. Button1_Click Associate the Button1_Click method with the button’s Click event.

Шрифт текста в CSS и его свойства

2013-02-08 / Вр:17:55 / просмотров: 7467

С помощью CSS можно задать любой стиль и вид текста. Добавив стиль текста в CSS, вы сокращаете и упрощаете код в HTML, а это, в первую очередь, даст быструю загрузку сайта.
Теперь вам не нужно использовать тег в HTML к каждому объекту, достаточно задать правильно правило в таблице стилей CSS.

Свойства шрифта

Чтобы сделать изменение шрифта в CSS, ознакомьтесь с правилами и с его свойствами.

1). Чтобы задать определенный шрифт заголовку, тексту или сайту в целом, существует в CSS правило font-family.

font-family

будет присвоено шрифт «Arial».

Часто используемые шрифты: «Verdana», «Arial», «Times New Roman».

2). Если вы хотите поменяет стиль шрифта, воспользуйтесь правилом font-style.

font-style: normal | italic | oblique

normal — нормальный шрифт;
italic — курсив;
oblique — наклонный шрифт.

3). Если вы хотите сделать слово или текст жирным, используйте правило font-weight.

font-weight: normal | lighter | bold | bolder

normal — нормальная жирность
lighter — светлое начертание
bold — полужирный
bolder — жирный
100–900 — 100 — светлый шрифт, 900 — самый жирный

4). Если нужно указать размер шрифта, используйте правило font-size. Размер задается в pt — пункты, px — пиксели и в % — процентах.

font-size

5). Хочу вам предложить сокращённый способ вышеперечисленных правил. Воспользуйтесь правилом font.

font

Примечание: Все значения указывайте через пробел.

Нестандартный шрифт

6). Бывают такие моменты, когда нужно использовать для оформления сайта нестандартный шрифт. Нестандартный шрифт — это шрифт, который не устанавливается на компьютере по умолчанию и вероятней его может не быть у пользователя.

Правило @font-face позволяет импортировать внешний файл шрифтов в документ.

Подключение нестандартных шрифтов с помощью CSS

Залейте нестандартный шрифт формата ttf (другой формат я вам не рекомендую) в папку вашего сайта. Для примера я возьму шрифт под именем «DS-UncialFunnyHand-Medium.ttf».

Пример подключения нестандартного шрифта.

font-family: — здесь пишем имя шрифта.
src: local(«. «) — проверка наличия шрифта на компьютере пользователя
url(. ) — если шрифт у пользователя на компьютере не установлен, тогда шрифт будет загружается с сайта по указанному пути .

На этой последней ноте я и закончу свою статью «шрифт текста в css и его свойства». Если я что-то пропустил или сделал ошибку, пишите в комментарии.

Изменение свойств текста

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

font-family

Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.

Определяемые шрифты должны быть установлены на компьютере пользователя, поэтому совершенно не разумно использовать редкие и мало известные шрифты. Существуют несколько отборных «безопасных» шрифтов (наиболее часто используются шрифты arial, verdana, times new roman), но вы можете определять более одного шрифта, разделяя их запятыми. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Такая возможность очень полезна, так как иногда на разных компьютерах может устанавливаться разный набор шрифтов. Таким образом, например, декларация «font-family: arial, helvetica» может использоваться для определения соответствующего шрифта на PC (на котором традиционно устанавливается шрифт arial, но нет шрифта helvetica) и на Apple Mac (на котором традиционно нет шрифта arial, и в этом случае будет использован шрифт helvetica).

Внимание: Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: «Times New Roman».

font-size

Свойство font-size задает размер шрифта. Будьте с этим свойством осторожны: не стоит использовать в качестве заголовков параграфы, отображаемые шрифтом большого размера; для этого есть специальные теги

font-weight

Свойство font-weight определяет толщину или жирность шрифта. На практике обычно используют два его состояния: font-weight: bold и font-weight: normal. Хотя в теории оно также может принимать значения bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 и 1000. Однако, посмотрев на то, как большинство браузеров отказываются понимать эти значения, вы поймете, что гораздо безопаснее иметь дело всего лишь со значениями bold и normal.

font-style

Свойство font-style определяет, будет ли текст отображаться курсивом или нет. Оно может быль либо font-style: italic, либо font-style: normal.

text-decoration

Свойство text-decoration определяет подчеркнутость текста. Оно может быть:

  • text-decoration: overline – помещает горизонтальную линию над текстом.
  • text-decoration: line-through – помещает горизонтальную линию через текст, создавая эффект перечеркивания.
  • text-decoration: underline — помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст – ссылка.

Как правило, данное свойство используется для оформления ссылок, в частности чтобы убрать подчеркивание при помощи значения text-decoration: none.

text-transform

Свойство text-transform позволяет изменить регистр букв текста.

  • text-transform: capitalize – переводит первые буквы всех слов в верхний регистр.
  • text-transform: uppercase – переводит все буквы в верхний регистр.
  • text-transform: lowercase — переводит все буквы в нижний регистр.
  • text-transform: none – попробуйте сами это значение.

Разбивка текста

Свойство letter-spacing и свойство word-spacing определяют расстояние между буквами и словами соответственно. Их значением может быть число в любых единицах измерения, либо ключевое слово normal.

Свойство line-height определяет высоту строки элемента, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, «2» означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal.

Свойство text-align выравнивает текст внутри элемента. Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

Свойство text-indent создает отступ на заданную величину первой строки параграфа. Подобное форматирование традиционно для полиграфии и редко в цифровых средствах информации.

TLabel Почему не изменяется Font.Style и Font.Size?

Вопрос

97mik 16

97mik 16

  • Продвинутый пользователь
  • Пользователи
  • 16
  • 98 сообщений
  • Город Брест

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

1 ответ на этот вопрос

Рекомендуемые сообщения

Похожий контент

Доброго времени суток, форумчане.
Столкнулась с очень странной проблемой при попытке редактирования FMX стиля в RAD Studio 10.3 (но проблема, по крайней мере у меня, тащится ещё с 10.2) — при нажатии на любой элемент стиля в его структуре — она заменяется на структуру формы и выбранный элемент не отображается в инспекторе. При этом, нужно именно тыкнуть на элемент стиля, раскрытие групп работает и структура остаётся на месте. Единственный способ добраться до свойств элемента стиля — через Edit Custom Style на компоненте, что не очень удобно, да и не даёт целиком возможности редактировать стиль.
Может я чего-то делаю не так или так и должно быть? Надеюсь на вашу помощь, ибо эти стили уже в печёнках сидят. Видео с последовательностью действий (youtube).

Как изменить сам Header, скролы ? Я открывал стайл блок, но всё что смог изменить там это цвет полей и всё.

Всем привет!
Корректируем стиль мобильного приложения для iOS, для этого дорабатываем png стиля и грузим его обратно в StyleBook.
Дорабатываем только для Scale = 2,0 т.к. минимально поддерживаемый телефон — 5S (или просто 5).
В редакторе форм отображается интерфейс так, как он выглядел бы для Scale = 1,0 но 1,0 нас не интересует вообще, мы его даже не рисуем.
Вопрос: можно ли как-то видеть в редакторе форм интерфейс приложения для Scale = 2,0 ?

Доброе время суток. После создания/изменения (Edit Custom Style. ) собственного стиля у Label1 (добавил в качестве фона прямоугольник) перестали обрабатываться события OnMouseMove, OnMouseDown и т.д. (Label1.HitTest:=True). До изменения стиля все работало. В чем причина? Спасибо за ответ.

Добрый день!
Столкнулся с проблемой вывода текста разного размера по одной линии. Не получается использовать BaseLine доступную для Firemonkey.
Baseline — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов. В строке символы текста стоят на базовой линии, а нижние выносные элементы текста «свисают» с неё.
Из описанного выше ясно, что выводимые символы должны лежать на это линии, но в реале как то все некорректно выводится.
Сделал два примера VCL (черный фонт) и FireMonkey(черный полупрозрачный фонт), оказалось, что вывод текста осуществляется по разному, при одном и том же значении размера шрифта. Базовая линия в обоих примерах 356.
Совмещаем отображение символов: GlyphsEqual.png Символы совпали, но базовая линия смещена.
Совмещаем базовую линию: PosEqual.png Базовая линия совпала, как и верхний край контролов, а вот текст (серый) значительно ниже.
А теперь собственно вопрос вопрос, где ошибка? Как рассчитать базовую линию для FMX?

P.S.
Про attributes у TTextLayout знаю.

Возникла вот такая непонятная ситуация: до этого момента я всегда считал что TLabel никак физически не может принять Tab Focus наравне с TRectangle и тому подобных. Судя по всему я ошибался. Ниже прилагаю скрин окна Tab Order, что там делает TLabel неясно. Ну да ладно. Вопрос в том как его оттуда убрать, чтобы он не жрал Tab Focus? Стандартных галочек TabStop и CanFocus в Tlabel нет.

P.S. Я не помню чтобы я сталкивался с этой проблемой в предыдущих версиях RAD.

Последние посетители 0 пользователей онлайн

Ни одного зарегистрированного пользователя не просматривает данную страницу

Как изменить шрифт?

При создании сайта постоянно возникает необходимость изменения шрифта текста для самых разных частей и элементов HTML-страниц, ведь это не только добавляет сайту уникальность и стиль, но и повышает качество восприятия информации. В HTML для этого существуют специальные теги, о них мы и поговорим в данном уроке, который будет одним из самых больших в этом учебнике. Но, как я вам уже говорил ранее, не старайтесь все запоминать наизусть, не надо, главное — разобраться и понять о чем идет речь на каждом этапе урока.

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:

. и . — выделяют текст полужирным шрифтом.

. и . — выделяют текст курсивом.

. — выводит текст в верхнем индексе, например E = mc 2 .

. — выводит текст в нижнем индексе, например H2SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги и , подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align , возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style , причем его допустимо указывать внутри любых тегов . Общий синтаксис следующий:

style= «text-decoration:underline» >. — подчеркивает текст.

style= «text-decoration:overline» >. — надчеркивает текст.

style= «text-decoration:line-through» >. — зачеркивает текст.

Пример изменения стилей шрифтов

Результат в браузере

H2SO4 — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style . Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style . Его общий синтаксис следующий:

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег или что делать, когда нет нужных тегов

Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.

Итак, знакомьтесь — . . Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style . Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.

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

Шрифты Семейство
‘Comic Sans MS’ cursive (рукописные)
Courier monospace (моноширинные)
Arial, Helvetica, Verdana, Tahoma sans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamond serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style , который можно применить внутри любого тега . Общий синтаксис указания следующий:

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег и примените атрибут к нему.

Пример изменения имени шрифтов

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега . Общий синтаксис такой:

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег и примените атрибут к нему.

Пример изменения размера шрифтов

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Или вообще вот так.

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.

  1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
  2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
  3. Напишите один параграф в начале статьи и по два в каждом разделе.
  4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
  5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
  6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
  7. Напишите в последнем параграфе формулу спирта: C2H5OH.

Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size

Илон Маск рекомендует:  Что такое код openssl_x509_export
Свойство Описание значения
font-family Указыватся до трех шрифтов, через запятую: serif|san-serif |cursive |fantasy | monospace.
font-style начертания: normal (по умолчанию), italic (курсив), oblique (наклонный).
font-variant варианты начертания: normal (по умолчанию), small-caps (все буквы заглавные уменьшенного размера).
font-weight жирность шрифта: normal , bold, bolder(жирный), lighter(бледный).
font-size размер шрифта в абсолютных: (константы xx-small | x-small | small | medium | large | x-large | xx-large | <Абсолютный размер>или в относительных единицах или процентах: larger | smaller | <Отн. размер>%;

Например, вот описание свойств шрифта для

Это текст, выведенный с указанными фонтами

Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле:

Порядок свойств font здесь таков:

Свойство font-family определяет название шрифта или семейства шрифтов для отображения документа. Обычно указывается несколько шрифтов, через запятые, чтобы выбрать из них тот шрифт, который установлен на компьютере клиента. Кроме названия может указываться гарнитура (семейство) шрифтов: serif(Times New Roman, Georgia); sans — serif(Arial, Verdana); monospace(моноширинные Courier, Courier New).

Установка шрифта с помощью стилей

Заголовок1

Заголовок2

Заголовок3

Заголовок1

Заголовок2

Заголовок3

Таблица

Еще одно свойство @font-face — указывает список семейств или названий шрифтов, а также электронный адрес, по которому будут загружаться шрифты, если их нет на компьютере пользователя.

Свойства текста.

Свойство Описание значения
text-decoration none (по умолчанию), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание).
text-transform регистр букв: none, capitalize (Первая Буква Слова Преобразуется В Заглавную), uppercase (все в заглавные), lowercase (все в строчные).
text-align Горизонтальное выравнивание текста: left (по умолчанию), right (по правому краю), center центрирование, justify (по ширине колонки).
vertical-align Вертикальное положение базисной линии элемента: baseline, middle, sub – элемент подстрочный, super – элемент надстрочный, text-top – выравнивает верх элемента по верху шрифта родительского элемента , text-bottom – выравнивает низ по низу шрифта родительского элемента, top – выравнивает вершину по самому высокому элементу линии, bottom – выравнивает низ элемента по самому низкому элементу.
text-indent <Отступ>|<Отступ>%; Устанавливает величину отступа в первой строке параграфа абсолютной величиной или в процентах.
line-height Задает вертикальное расстояние между строками текста. normal||%; Высота может быть задана абсолютной величиной или процентом от высоты родителя.
word-spacing Определяет дополнительное расстояние между словами в тексте. normal| ; Значение атрибута может быть задано либо абсолютной величиной, либо предопределенным значением normal.
letter-spacing Определяет расстояние между символами в тексте: normal| ;
word-wrap normal|break-word; Устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам. normal – запрещает переносить строки по словам, break-word – разрешает.
white-space Устанавливает, как отображать пробелы между словами: normal, nowrap – пробелы не учитываются; pre – текст показывается с учетом пробелов и переносов, как в коде HTML; pre-line – пробелы и переносы не учитываются; pre-wrap – в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, текст автоматически переносится на следующую строку; inherit – наследует значение родителя.

Рассмотрим пример. Свойство text-indent — определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0. Свойство text-align — выравнивает текст в блоке содержимого элемента.

Создание отступа с помощью параметра text-indent.

CSS/Шрифты и текст

Шрифт и текст в CSS имеют следующие свойства.

Содержание

Шрифты [ править ]

font-family [ править ]

В этом свойстве через запятую перечисляются шрифты в порядке приоритета. Браузер будет использовать первый из списка. Если первый не будет найден, будет использоваться следующий и так далее. Если ни один не будет найден, тогда браузер применит шрифт по умолчанию. Если в имени шрифта есть пробелы, его необходимо заключать в одинарные или двойные кавычки.

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

Существуют 5 семейств шрифтов:

  1. serif — шрифты с засечками
  2. sans-serif — шрифты без засечек
  3. monospace — моноширинные
  4. cursive — курсивные
  5. fantasy — декоративные

Пример, как выглядят такие шрифты:

serif sans-serif monospace cursive fantasy

font-style [ править ]

Существуют три значения этого свойства:

  1. normal — обычный (значение по умолчанию)
  2. italic — курсив
  3. oblique — наклонный

Браузеры последний стиль обычно отображают как курсивный

font-variant [ править ]

  1. normal — обычный (значение по умолчанию)
  2. small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weight [ править ]

Это свойство устанавливает вес (насыщенность) шрифта.

  1. 100
  2. 200
  3. 300
  4. 400 или normal (значение по умолчанию)
  5. 500
  6. 600
  7. 700 или bold
  8. 800
  9. 900

font-size [ править ]

Возможные значения этого свойства:

  1. абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
  2. относительные константы: smaller, larger
  3. абсолютные и относительные единицы измерения CSS

line-height [ править ]

Межстрочный интервал, часто применяется вместе с font-size

  1. normal — нормальное значение (по умолчанию)
  2. number — число (больше либо равно 0), на которое умножается текущий размер шрифта
  3. length — фиксированное значение в единицах измерения CSS
  4. % — проценты от текущего размера шрифта

font [ править ]

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифты [ править ]

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face

Шрифты бывают следующих типов:

  1. eot — embedded opentype (.eot)
  2. ttf — truetype (.ttf)
  3. otf — opentype (.ttf, .otf)
  4. svg — svg-шрифты (.svg, .svgz)
  5. woff — web open font format (.woff)

Текст [ править ]

text-align [ править ]

  1. left — по левому краю (значение по умолчанию)
  2. right — по правому краю
  3. center — по центру
  4. justify — по ширине

letter-spacing/word-spacing [ править ]

Интервал между буквами/словами

  1. normal — нормальное значение (по умолчанию)
  2. length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decoration [ править ]

  1. underline — подчёркнутый текст
  2. overline — линия над текстом
  3. line-through — перечёркнутый текст
  4. blink — мигающий текст
  5. none — отмена всех эффектов (значение по умолчанию)

text-indent [ править ]

Отступ первой строки

  1. length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
  2. % — проценты от ширины строки

text-transform [ править ]

  1. none — нет трансформации (значение по умолчанию)
  2. uppercase — преобразование всех строчных символов в заглавные
  3. lowercase — преобразование всех заглавных символов в строчные
  4. capitalize — преобразование первой буквы каждого слова в заглавную

vertical-align [ править ]

Выравнивание элемента по вертикали

Применяется только к строчным элементам и к ячейкам таблицы

Возможные значения для строчных элементов:

  1. baseline — по базовой линии (значение по умолчанию)
  2. sub — нижний индекс
  3. super — верхний индекс
  4. top — верх элемента выравнивается с самым высоким элементом строки
  5. text-top — верх элемента выравнивается с верхом шрифта родительского элемента
  6. middle — по середине
  7. bottom — по нижней части
  8. text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
  9. проценты
  10. величины CSS

Для ячеек таблицы:

  1. baseline — содержимое ячейки по базовой линии (значение по умолчанию)
  2. top — по верхнему краю
  3. bottom — по нижнему краю
  4. middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-space [ править ]

Пробелы между словами

  1. normal — обычное поведение (значение по умолчанию)
  2. pre — пробелы и переносы учитываются
  3. nowrap — пробелы и переносы не учитываются
  4. pre-wrap — пробелы учитываются, текст переносится
  5. pre-line — пробелы не учитываются, текст переносится

text-shadow [ править ]

Добавление тени к тексту (CSS3)

  1. h-shadow — смещение тени по горизонтали
  2. v-shadow — смещение тени по вертикали
  3. blur — радиус размытия тени
  4. color — цвет тени
  5. none — нет тени (значение по умолчанию)

text-overflow [ править ]

Видимость текста, если он не влезает в ширину блока (CSS3)

  1. clip — текст обрезается по размеру блока (значение по умолчанию)
  2. ellipsis — текст обрезается с добавлением многоточия

Текст в SVG

Продолжаем изучать векторную графику, на этот раз разберемся с текстами в SVG, которые позволяют делать гораздо больше, чем обычный HTML.

Прежде всего рассмотрим основной синтаксис, который представляет собой тег text c координатам x и y, определяющими baseline:

Такой SVG-текст ничем не отличается от обычного:

Стилизация

Текст может быть стилизован с помощью CSS: font-weight, font-style, и text-decoration, как и обычный HTML. Если необходимо применить стиль к отдельному элементу, то необходимо использовать тег tspan:

Способ написания

Можно изменять ориентацию текста с обычной (слева направо) на какую-то другую, например как в Японии, сверху вниз с помощью конструкции writing-mode: tb, где tb — это «top-to-bottom»

Контур текста

SVG-текст — это в первую очередь векторное изображение, поэтому с помощью outline можно добавить обводку и изменить заливку с помощью fill:

Направляющие

В SVG текст можно отображать не только горизонтально или вертикально, но и по направляющей — любой векторной кривой. Аналогию можно найти в графическом редакторе (например Adobe Illustrator), используя инструмент Pen Tool:

В коде должны быть теги path и defs:

Также необходимо с помощью textPath «запустить» текст по направляющей:

Градиент

Также можно добавить градиент для заливки текста. Сначала необходимо задать цвета:

А затем применить градиент с помощью fill:

Шрифты

Чтобы использовать web-safe шрифты, достаточно простой конструкции (демо):

Для использования @font-face необходимо объявить шрифты в теге defs, тогда принцип работы будет такой же, как в HTML (демо):

Также существуют SVG-шрифты (с расширением .svg, несколько примеров), которые можно использовать двумя способами: вызывая внешний SVG-шрифт либо используя уже встроенный в .svg-файл. В этой статье подробно рассказано об этих способах.

Преимущества использования SVG-шрифтов:

  • Поддерживается любым браузером или программой, которые умеют просматривать SVG-файлы
  • Можно хранить несколько шрифтов в одном файле
  • Открытый код
  • Поддержка современными браузерами

Выводы

Использование SVG-текста, безусловно, намного более гибко, чем обычный HTML. Главное — уметь правильно и к месту применять этот инструмент. Стоит напомнить, что SVG не поддерживается в IE 8 и ниже.

Илон Маск рекомендует:  Что такое код xslt_set_log
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL