Жирный шрифт код html: Как выделить текст жирным в html

SVG. Работаем с текстом

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="50" font-size="32" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        Этот кот в SVG
    </text>
</svg>

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

• direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
• dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
• fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
• font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
• font-size — Размер шрифта. Значение по умолчанию 12 пт.
• font-size-adjust — Значение по умолчанию — none
• font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
• font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
• font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
• glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
• kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
• letter-spacing — Интервал между буквами. Возможные значения: normal | число
• text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
• text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
• unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
• word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
• writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
• x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
• y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">Подчеркнутый кот средствами SVG</text>
</svg>

Частичная стилизация через <tspan>

Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">
  <tspan>Жирный кот</tspan>, 
  <tspan>наклонный кот</tspan> и <tspan>подчеркнутый кот</tspan>.</text>
</svg>

Цвет

Цвет текста задаётся через свойство fill.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 52">
    <text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif"  fill="red">Цветной кот</text>
</svg>

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="70" y="20">Неко - японский кот</text>
</svg>

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:

header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 90px;
  fill: blue;
}
<header>
    <svg xmlns="http://www.
 
 w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

Посмотреть демо.

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

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

SVG-текст можно сделать ссылкой.

<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

Обводка текста

Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<text y="50" fill="#c96" 
    font-size="32px" 
    font-family="Futura Condensed ExtraBold, Arial Black, sans-serif" 
    stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

При желании можно вынести код в стили.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		  fill: #c96; font-size:32px;
		  font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		  stroke: yellow; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="50">Обведи кота вокруг пальца</text>
</svg>

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0%" x2="0%" y1="0%" y2="100%">
      <stop stop-color = "#ddd" offset = "0%"/>
      <stop stop-color = "#FF00ee" offset = "100%"/>
    </linearGradient>
  </defs>
  <text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>

Текст вдоль кривой линии

Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path fill="none" stroke="#000000"
      d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
  </defs>
  
  <use xlink:href="#textpath"/>
  <text x="10" y="100" font-size="24">
  <textPath xlink:href="#textpath">
    Кот вдоль кривой
  </textPath>
  </text>
</svg>

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Вернуться в раздел SVG

Реклама

html — Жирный тег в HTML — html5 — HTML-код — HTML-форма — In 30Sec от Microsoft Award MVP —

Learn html — руководство по html — полужирный тег b в html — примеры html — программы html

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

Синтаксис тега

 content 

  Tryit  

    <тело>
        

            Учитеськодировать в Wikitechy

            Научителюдей, как устроены различные технологии

            Охватываетразные темы

            Начинаяот продвинутых новичков до уровня навыков.
        
    
  

 
 сделать текст жирным html 
 

 
 почему мой текст состоит из 2 строк вместо 1? 
 

 
 сделать текст жирным в html 
 

 
 как убрать точки в списке в HTML 
 

 
 как создать кнопку 
 

 
 Как заменить в HTML значение времени, которое я написал в java 
 

 
 сделать ссылку открытой на новой странице при нажатии 
 

 
 как использовать id 
 

 
 что такое упорядоченный список 
 

 
 как подчеркнуть текст 
 

 
 <дел>
                    <форма>