Css жирным текст: Как сделать текст жирным? | WebReference

Разное 

Содержание

Тег — Учебник HTML

❮ Назад HTML Справочник Далее ❯


Пример

Выделите текст жирным шрифтом (не помечая его как важное):

<p>Это обычный текст — <b>а это жирный текст</b>.</p>

Попробуйте сами »

Определение и использование

Тег <b> указывает жирный текст без какой-либо дополнительной важности.

Примечание: В соответствии со спецификацией HTML5, тег <b> следует использовать в качестве последнего средства, когда никакой другой тег не является более подходящим. В спецификации указано, что заголовки должны быть обозначены следующим образом: тегами <h2> по <h6>, подчеркнутый текст должен быть обозначен буквами тега <em>, важный текст должен быть обозначен тегом <strong>, а отмеченный/выделенный текст должен быть обозначен тегом <mark>.

Совет: Вы также можете использовать следующий CSS для установки полужирного текста: «font-weight: bold;».

Поддержка браузеров

Элемент
<b> Да Да Да Да Да

Глобальные атрибуты

Тег <b> также поддерживает Глобальные атрибуты в HTML.

События атрибутов

Тег <b> также поддерживает События атрибутов в HTML.

Еще примеры

Пример

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

<p>Это обычный текст — <span>а это жирный текст</span>.</p>

Попробуйте сами »

Связанные страницы

HTML учебник: HTML Форматирование текста

HTML DOM справочник: Объект bold

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <b> со следующими значениями по умолчанию:

Пример

b {
  font-weight: bold;
}

Попробуйте сами »

❮ Назад HTML Справочник Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть

ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

Жирный текст влияет на SEO

Ваш браузер не поддерживает HTML5 аудио. Вот взамен ссылка на аудио

1X

Длительность: 8:03

В новом подкасте №465 Николай Шмичков рассказал про то, как жирный текст влияет на SEO.

Текстовая версия выступления:

«Сегодня мы постараемся ответить на очень важный вопрос: “Влияет ли жирный шрифт на продвижение?”

Вы слушаете подкасты Seoquick.

Меня зовут Николай Шмичков.

И сегодня мы постараемся разобраться относительно того, на сколько жирный текст на сайте будет влиять на ваше SEO.

Давайте немного теории.

Что такое жирный текст согласно требованиям CSS.

Давайте посмотрим на это очень просто.

Первоначальное требование, которое вот есть по поводу CSS – его можно сделать тремя способами.

Да, существует целых три способа написать жирный текст на вашем сайте.

Первый способ сделать текст жирным – это тег <b>.

То есть вы выбираете как раз соответствующий стиль для этого тега.

Для тега <b> обязательно наличие закрывающего тега </b>.

И ему доступны такие атрибуты как класс, ID,тайтл и тому подобное.

Но с точки зрения SEO тег <b> не используется.

А используется следующий тег, так называемый <strong>.

Точно также пишется через закрывающий тег </strong>.

И согласно спецификации HTML тег <b> используется для жирного шрифта, в то время как тег <strong> используется для выделения важных фраз.

То есть если, например, вы хотите написать просто жирным шрифтом какую-то цифру – это можно сделать тегом <b>.

Но если вы хотите озаглавить непосредственно какой-то подзаголовок или название определения, то лучше использовать тег <strong>.

И таким образом вы помечаете этот фрагмент текста, как важный.

Вы можете написать текст, обрамить его тегом <strong> закрывающим и открывающим.

Визуально вы не увидите никакого отличия, но семантическое отличие будет колоссальным. и seo-оптимизаторы рекомендуют использовать непосредственно тот самый тег <strong>.

Ну ещё можно использовать так называемый жирный текст при помощи CSS, если вам не нужно его выделять ни тегом <b>, ни тегом <strong>.

Если нужно выделить его через определённые эффекты, то есть выделить отдельную толщину.

В CSS можно исполь теги font-weight, указывать значение border и layer, задавать степень жирности.

То есть не будет абсолютно жирного или абсолютно тонкого текста – можно задать промежуточные варианты от 100 до 900, ту самую степень жирности.

Раз мы начали с теории, то давайте уже перейдём непосредственно к практике.

По поводу жирного текста непосредственно в продвижении: влияет ли оно на продвижение?

Конечно же влияет.

Например, Яндекс считает, что за переоптимизация жирным шрифтом на вашем сайте вы можете получить нарушение – так называемое использования seo-текстов.

Использование жирного выделения шрифта может тоже вам стать немножечко неудобным моментом.

Потому что вам придётся находить этот seo-текст, исправлять и через кнопочку “Я всё исправил”, которую можно нажимать с интервалом в месяц.

То есть можно делать всего лишь раз.

Также можно написать по поводу жалоб, если у вас в меню и в каталоге встречаться повторяющиеся ключевые слова, которые часто выделенные жирным.

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

Страничка так и называется “использование seo-текстов”, вы с лёгкостью найдёте.

Относительно оптимизации текстов и как это правильно делать.

Мы можем сказать, что если Яндекс по поводу жирного шрифта очень-очень осторожен, то Google сказал обратное.

Google сказал, что полужирный текст может помочь вашему seo.

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

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

Об этом он сказал 12 ноября 2021 года на Search Cenral SEO.

И собственно вопрос: это стилистический выбор или может использовать для SEO, и Мюллер однозначно заявил, что это действительно помогает SEO продвижению.

Но это очень важный момент.

Очень важно, чтобы наличие seo-текста было минимальным.

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

Если вы хотите усилить продвижения вашего сайта – выделите только важные слова, важные пункты в абзаце.

Тогда это позволит лучше понять этот абзац и эту страницу.

Соответственно с роликом вы можете ознакомиться на канале Google webmaster, найти этот ролик от 12 ноября легко.

Итого, что мы можем сказать.

Google не говорит, что он не видит жирный шрифт.

Google прямым текстом намекает нам, что он видит выделенные теги <strong>.

И он говорит, что <strong> теги используют для определения качества страницы, для определения тематичности страницы.

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

Перепишите текст так, чтобы <strong> тегами были выделены нужные фрагменты страницы.

Возможно это очень вам поможет.

Но мы не рекомендуем ставить громадное количество <strong> тегов на вашей страничке.

Потому что, цитирую: “выделения всего текста на странице жирный шрифтом не добавит никакой ценности”.

Но наличие отдельных жирных слов подаст гораздо более сильные сигналы.

Самое интересное, что раньше Мэтт Каттс говорил, что разницы между тегом <b> и тегом <strong> нет.

Но, а на самом деле сеошники заметили разницу, что теги <strong> работают лучше, чем теги <b>.

Интересно будет посмотреть на эту тему.

Просто бывший сотрудник Google затрагивал эту же тему в своих сообщениях.

Итого, что мы можем сказать.

Семантические теги имеют колоссальное значение.

Важно чтобы ваш тег ещё присутствовал на рендере страницы.

Если вас жирный текст скрыт, то скорее всего он ранжироваться не будет.

Потому что мы прекрасно понимаем, что алгоритмы Гугла учитывают нахождение контента в рендере страницы, в частности в ее мобильной версии.

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

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

Резюмируя.

Да, теги важны.

Да, теги нужны.

Да, <strong> теги выделять в тексте нужно.

Поэтому на три абзаца выделяйте хотя бы один ключевой <strong> тег – это некий минимум для ваших копирайтеров.

Поэтому сегодня наш совет именно такой.

Если вы дослушали этот подкаст, то больше узнали о SEO.

И если вы хотите знать ещё больше – подписывайтесь на наши Подкасты.

Задавайте вопросы у нас в Telegram группе: у нас очень активное комьюнити там.

Также обязательно следите за нашими роликами в Ютубе.

И конечно же читайте самый лучший блог Seoquick в рунете.

И до новых встреч.»

Если у тебя есть вопросы, мы с радостью ответим в нашей группе в телеграмме — https://t.me/seoquick_com_ua

Типография | Windi CSS

Font Family

Утилиты для управления семейством шрифтов элемента.

без засечек

с засечками

моно

Настройка
 экспорт по умолчанию {
  тема: {
    продлевать: {
      семейство шрифтов: {
        без засечек: ['ui-sans-serif', 'system-ui'],
        с засечками: ['ui-serif', 'Грузия'],
        моно: ['ui-monospace', 'SFMono-Regular'],
        отображать: ['Освальд'],
        тело: ['Открытый Санс'],
      },
    },
  },
}

Семейства шрифтов могут быть указаны как массив или как простая строка с разделителями-запятыми:

 {
  // Формат массива:
  "sans": ["Helvetica", "Arial", "без засечек"],
  // Формат с разделителями-запятыми:
  "sans": "Helvetica, Arial, без засечек",
}

Обратите внимание, что Windi CSS автоматически не экранирует имена шрифтов. Если вы используете шрифт, который содержит недопустимый идентификатор, заключите его в кавычки или экранируйте недопустимые символы.

 {
  // Не будет работать:
  "sans": ["Экзо 2", /* ... */],
  // Добавляем кавычки:
  "sans": ["\"Экзо 2\"", /* ... */],
}

Размер шрифта

Утилиты для управления размером шрифта элемента.

XS

SM

BASE

LG

XL

2XL

3XL

4XL

5XL

6XL

7XL

9505

. тема: { размер шрифта: { ‘xs’: ‘.75rem’, ‘см’: ‘.875рем’, «крошечный»: «0,875 рем», «база»: «1рем», «lg»: «1,125 бэр», «xl»: «1,25 бэр», «2xl»: «1,5 бэр», «3xl»: «1,875 бэр», «4xl»: «2,25 бэр», «5xl»: «3rem», «6xl»: «4rem», «7xl»: «5rem», }, }, }

Вы можете указать высоту строки по умолчанию для каждого из ваших размеров шрифта, используя кортеж формы [fontSize, lineHeight] в файле windi. config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      см: ['14px', '20px'],
      база: ['16px', '24px'],
      LG: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это с помощью кортежа формы [fontSize, {letterSpacing, lineHeight}] в вашем файле windi.config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Или также с высотой строки по умолчанию
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        высота строки: '40px',
      }],
    },
  },
}

Сглаживание шрифта

Утилиты для управления сглаживанием шрифта элемента.

сглаживание

субпиксельное сглаживание

Стиль шрифта

Утилиты для управления стилем текста.

курсив

не курсив

Толщина шрифта

Утилиты для управления жирностью шрифта элемента.

Thin

Extralight

Light

Нормальный

Среда

Semibold

BOLD

Extrabold

Black

400

600

400

600

0004 windi.config.js

 экспорт по умолчанию {
  тема: {
    Вес шрифта: {
      «линия роста волос»: 100,
      «сверхлегкий»: 100,
      «тонкий»: 200,
      «светлый»: 300,
      «нормальный»: 400,
      «средний»: 500,
      «полужирный»: 600,
      «жирный»: 700,
      «сверхжирный»: 800,
      «очень жирный»: 800,
      «черный»: 900,
    },
  },
}

Font Variant Numeric

Утилиты для управления вариантом чисел.

обычные-числа

порядковые

дробные-ноль

Linting-Nums

OldStyle-Nums

пропорциональные номы

Tabular-Nums

Диагональные фракции

Сложные фракции

Гифены

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

нет

ручной

авто

Межбуквенный интервал

Утилиты для управления отслеживанием (межбуквенным интервалом) элемента.

БОЛЬШЕГО

TEAR

Нормальный

WID

шире

Самый широкий

0PX

2PX

0.5EM

Настройка

Windi.config.js

.
  тема: {
    Межбуквенное расстояние: {
      самый плотный: '-.075em',
      плотнее: '-.05em',
      плотно: '-.025em',
      нормальный: «0»,
      широкий: '0,025em',
      шире: «.05em»,
      самый широкий: '.25em',
    },
  },
}

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

Утилиты для управления интерлиньяжем (высотой строки) элемента.

Нет

TEAR

SNUG

Нормальный

Расслабленный

Свободный

1

2

3

4

5

60005. тема: { продлевать: { высота линии: { «экстра-рыхлый»: «2,5», }, }, }, }

Размер язычка

Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009). По умолчанию тема: { размер вкладки: { см: ‘2’, мд: ‘4’, лг: ‘8’, }, }, }

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

Утилиты для управления выравниванием текста.

слева

посередине

справа

justify

Text Color

Утилиты для управления цветом текста элемента.

Прозрачный

Ток

Grey-500

RED-500

ЖЕЛТЫ-500

Blue-500

Green-500

Grey-500/50

RED-500/50 0005

Yellow -5004. /50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    цвет текста: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Оформление текста

Утилиты для управления оформлением текста.

Тип оформления текста

Утилиты для управления типом оформления текста.

подчеркнутый

надчеркнутый

сквозной

без подчеркивания

Цвет оформления текста

Утилиты для управления цветом оформления текста.

прозрачный

Ток

Грей-500

RED-500

Желтый-500

Blue-500

Green-500

Grey-500/50

Red-500/50

Желтый-500/50 0005

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textDecorationColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Стиль оформления текста

Утилиты для управления стилем оформления текста.

сплошной

двойной

пунктирный

пунктирный

волнистый

Толщина оформления текста

Утилиты для управления толщиной оформления текста.

Auto

от Font

1

2

3

4

5

6

7

8

0.1REM

3PX

0,3EM5

0,1REM

3PX

0,3105

0,1REM

. js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationLength: {
        см: '1px',
        мд: '2px',
        LG: '4px',
      },
    },
  },
}

Смещение оформления текста

Утилиты для управления смещением оформления текста.

Auto

1

2

3

4

5

6

7

8

0,6Rem

8.5px

0.5 Expliz По умолчанию { тема: { textDecorationOffset: { см: ‘1px’, мд: ‘2px’, LG: ‘4px’, }, }, }

Непрозрачность оформления текста

Утилиты для управления непрозрачностью цвета оформления элемента. Это запасной вариант цвета оформления текста, начиная с WindiCSS v3.4.0.

5

10

20

25

30

40

50

60

70

80

9

9000 9000 9000 100

9

9000 9000

9

9000 9000

9

9000 9000

9000 9000

400005

9000.

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationOpacity: {
        10: «0,1»,
        20: «0,2»,
        95: «0,95»,
      },
    },
  },
}

Отступ текста

Утилиты для управления отступом текста.

по умолчанию

XS

SM

MD

LG

XL

2xL

3XL

10005

1/2

-x

1/2

9000 -xss

5

1/2

9000 -x

1/2

9000. .js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      отступ текста: {
        «4xl»: «5rem»,
        «5xl»: «6rem»,
      },
    },
  },
}

Непрозрачность текста

Утилиты для управления непрозрачностью цвета текста элемента.

5

10

20

25

30

40

50

60

70

80

9

9000 9000 9000 100

9

9000 9000

9

9000 9000

9

9000 9000

9000 9000

400005

9000.

 экспорт по умолчанию {
  тема: {
    продлевать: {
      непрозрачность текста: {
        10: «0,1»,
        20: «0,2»,
        95: '0,95',
      },
    },
  },
}

Text Shadow

Утилиты для управления тенью текстового элемента.

по умолчанию

sm

md

lg

xl

нет

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // Если предоставлена ​​тень ПО УМОЛЧАНИЮ, она будет использоваться для теневая утилита без суффикса.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0,25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

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

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

Ширина обводки текста

Утилиты для управления шириной обводки текста.

default

none

sm

md

lg

1

2

3

4

5

6

7

8

0. 1rem

3px

0.3em

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textStrokeWidth: {
        'xl': '6',
        «2xl»: «8»,
      },
    },
  },
}

Цвет обводки текста

Утилиты для управления цветом обводки текста.

Прозрачный

Ток

Грей-500

RED-500

Yellow-500

Blue-500

Green-500

Grey-500/50

RED-500/50 0005

Yellow -5004. /50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textStrokeColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Преобразование текста

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

прописные

строчные

заглавные

обычный регистр

Text Overflow

Утилиты для управления переполнением текста в элементе.

урезать

overflow-ellipsis

overflow-clip

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

Утилиты для управления выравниванием по вертикали встроенного блока или поля ячейки таблицы.

baseline

top

middle

bottom

text-top

text-bottom

Whitespace

Утилиты для управления свойством пробела элемента.

обычная

обычная

предварительная

предварительная

предварительная

Разрыв слов

Утилиты для управления разрывами слов в элементе.

нормальный

слов

все

Режим письма

Утилита режим письма устанавливает, будут ли строки текста располагаться горизонтально или вертикально, а также направление, в котором блоки перемещаются. Если он установлен для всего документа, он должен быть установлен для корневого элемента (элемент html для документов HTML).

обычный

вертикальный-правый

вертикальная-левая

Ориентация письма

Утилита ориентация письма устанавливает ориентацию символов текста в строке. Это влияет только на текст в вертикальном режиме (когда режим письма не является горизонтальным-tb ). Это полезно для управления отображением языков, использующих вертикальное письмо, а также для создания вертикальных заголовков таблиц.

смешанный

вертикальный

боковой

[Предложение] Сделать полужирный текст постоянной ширины — CSS

Ферди_Кристан

#1

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

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

Текущие решения
В настоящее время разработчики используют несколько решений/хаков для решения этой проблемы:

  • Предоставление элементам фиксированной ширины (единственный способ, не требующий взлома, но с точки зрения дизайна не лучший и часто невозможный из-за CMS или переводов)

  • Исправление отрицательного межбуквенного интервала для элементов, выделенных полужирным шрифтом (очень неточная техника, которая сильно зависит от шрифта и, возможно, даже от алгоритмов рендеринга. Она также изменяет внешний вид самого текста)

  • Использование тени текста в 1 пиксель (выглядит ужасно, это не то же самое, что настоящий полужирный рендеринг)

  • Резервирование места для жирного шрифта с использованием псевдоэлемента (сильно зависит от макета и невозможно, если псевдоэлемент уже используется для другой цели)

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

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

 а: наведите {
   вес шрифта: полужирный! стабильный
}

лиамкин

#2

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

Таким образом, это может привести к усечению содержимого или полосе прокрутки в меню… которое не очень доступно и не очень приемлемо.

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

Или установите размер на основе полужирного шрифта (например, во временном элементе, не вставлен в DOM, чтобы текстовые читатели не нашли его) так что вы знаете есть место.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *