Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

Как уменьшить жирность (толщину) шрифта — Вопрос от mitinskaya37

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация
>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16653)
  • Платные услуги (2162)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1442)
  • Редактор страниц (237)
  • Новости сайта (501)
  • Каталоги (809)
  • Блог (дневник) (114)
  • Объявления (296)
  • Фотоальбомы (434)
  • Видео (258)
  • Тесты (60)
  • Форум (581)

Продвижение сайта

  • Монетизация сайта (222)
  • Раскрутка сайта (2463)

Управление сайтом

  • Работа с аккаунтом (5355)
  • Поиск по сайту (427)
  • Меню сайта (1767)
  • Домен для сайта (1545)
  • Дизайн сайта (13510)
  • Безопасность сайта (1489)
  • Доп. функции (1311)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (320)
  • Статистика сайта (198)
  • Соц. постинг (213)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (435)
  • Софт для вебмастера (39)
  • Вопросы
  • Дизайн сайта
  • Как уменьшить жирность…
В данном случае вопрос по тегу h2.

Сейчас в стилях

h2 {
 padding-bottom: 14px;
 font-size: 1.6em;
 line-height: 1.2;
 color: #916953;
 font-family: ‘Lobster’, cursive;

и виглядит не читаемо

  • дизайн
  • css-стили
  • размер-шрифта
| Автор: mitinskaya37 | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

. ..

Работа с текстом в CSS

🗓️ Обновлено: 02.05.2023

💬Комментариев: 0

👁️Просмотров: 189

Каждый, кто сталкивается с CSS, должен понимать, как работают теги и свойства для работы с текстом. На первый взгляд кажется, что это очень просто, но стоит углубиться в вопросы font-weight, и у новичков может возникнуть особенно много вопросов. Рассмотрим детальнее форматирование текста css, и на что нужно обратить внимание.

Основные свойства CSS

CSS  – незаменимый инструмент для оформления страниц, написанных на HTML. Он позволяет разграничить содержание веб-страницы от элементов ее оформления. В каскадных таблицах стилей достаточно много свойств, но действительно значимых не так уж и много. Их всех объединяет простой синтаксис в виде показателей *свойство: значение”, которые располагаются внутри фигурных скобок нужного селектора. Вот примеры основных свойств, которые используются каждый день для работы с текстом CSS:

  1. font-size. Используется для изменения размера шрифта. Высота букв может задаваться константами, пунктами, пикселями, процентами и другими соотношениями.
  2. color. Определяет цвет текста. Его можно установить, написав после двоеточия зарезервированное или шестнадцатеричное название цвета, RGB значение.
  3. background-color. Заливает нужный участок текста цветом, словно он выделен маркером. Варианты значений для background-color аналогичны со свойством color.
  4. font-style. Этим свойство задается стиль шрифта в зависимости от выбранного значения, который может принимать значение обычного, курсивного или наклонного (и отличающегося от курсивного) написания.
  5. font-weight. С этим свойством можно не волноваться, как изменить жирность шрифта в CSS. Значение можно задать двумя способами. Первый – буквенное, чаще всего используется обычное (нормал) и полужирное (болд). Второй способ – числовой, 100-900, чем цифра выше, тем более жирное начертание.
  6. font-family. Определяет список шрифтов, которые будут использоваться при стилизации текста. Могут использоваться как названия шрифтов, так и названия групп шрифтов.

Довольно часто стили текста CSS называют тегами, используя привычное название из HTML. Хоть это по сути разные термины с отличным друг от друга синтаксисом, но для простоты понимания на это зачастую не обращают внимания. 

CSS – теги для текста

Для форматирования текста существует много различных тегов CSS. Расстояние между буквами определяется свойством letter-spacing. Значение можно задавать в пикселях, дюймах, пунктах и других вариантах. Допускается даже отрицательное значение, но предварительно нужно убедиться, что текст получается читабельным.

Также полезным будет text-align. Этот тег выравнивает текст в зависимости от указанного значения:

  • left;
  • center;
  • right;
  • justify.

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

Хотите знать больше про CSS? Как работать с каскадными таблицами, чтобы у веб-сайтов и приложений получался удобный и красивый дизайн? На эти и другие вопросы вы сможете получить ответы в Компьютерной школе Hillel.

По материалам: https://itwiki.dev/ru

Сделать одно слово полужирным — HTML и CSS — Форумы SitePoint

sachinkit 1

Я хочу выделить жирным шрифтом только слово «Код» в моем следующем синтаксисе CSS. Это код для вставки инструкции на страницу книги, пожалуйста, помогите

 .bloom-page.insideFrontCover .bloom-contentNational1:before {content: «Это мой код»; Размер шрифта: 17pt! важный; семейство шрифтов: Аннапурна Непал! важный; межсловный интервал: 5pt ! важный; высота строки: 1 ! важный; цвет шрифта: 3px 2px зеленый! важный;}

ПолОБ 2

Привет,

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

Как обычно, вы можете «взломать» что-то для подчинения, но это имеет очень ограниченный масштаб и зависит от обстоятельств.

Лучше всего изменить HTML-код, чтобы он позволял делать то, что вы хотите.

сачинкит 3

Не могли бы вы, пожалуйста, помочь перекодировать это, чтобы я мог выделить только слово
:before {content: «Это мой код»}

Спасибо.

ТехноМедведь 4

Павел привел вам пример. Вы пробовали использовать код, который он предоставил?

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

2 лайков

PaulOB 5

Сачинкит:

Не могли бы вы, пожалуйста, помочь перекодировать это, чтобы я мог выделить только слово
:before {content: «Это мой код»}

Простой ответ: НЕТ вы не можете выделить ни одно слово в этом фрагменте.

Возможны следующие варианты:

  1. Настройте html так, чтобы он позволял вам делать то, что вы хотите (добавьте пустой тег в начале элемента, а затем вы можете настроить его с помощью свойства содержимого только для одного слова).

  2. Используйте js, чтобы найти нужное слово, а затем добавьте подходящие теги вокруг слова, чтобы вы могли стилизовать его из css.

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

  4. Используйте изображение в свойстве содержимого вместо текста.

5 лайков

Миттиниг 6

Может ли Unicode быть приемлемой альтернативой?

Код против Code

Код

против кода

Код против 𝐂𝐨𝐝𝐞

Код

против 𝐂𝐨𝐝𝐞

* Предостережение: если браузер не может отображать эти кодовые точки, пользователи увидят на их месте квадраты, ромбы с вопросительными знаками или что-то уродливое.

2 лайка

7

Миттиниг:

Код

против 𝐂𝐨𝐝𝐞

И как псевдоконтент, текст OP будет таким:

 content:"Это мой \1d402\1d428\1d41d\1d41e";

2 лайков

сачинкит 8

Миттиниг:

Cod&#101

Вау, это здорово, но я не могу найти такой код для полужирного символа в юникоде Devnagari

ronpat 9

Я попытался выполнить поиск в Интернете по запросу «Devanagari unicode»

duckduckgo.com Юникод

Деванагари на DuckDuckGo

ДакДакГоу. Конфиденциальность, упрощенный.

Эта статья в Википедии была первой в списке найденных элементов:

en.wikipedia.org

Деванагари (блок Unicode)

Devanagari — это блок Unicode, содержащий символы для написания таких языков, как хинди, маратхи, бодо, майтхили, синдхи, непали и санскрит, среди прочих. В своем первоначальном воплощении кодовые точки U+0900..U+0954 были прямой копией символов A0-F4 из стандарта ISCII 1988 года. Блоки бенгальского, гурмукхи, гуджарати, ория, тамильского, телугу, каннада и малаялам также были основаны на кодировке ISCII. Следующие документы, связанные с Unicode, описывают цель и процесс…

Может быть, это поможет?

сачинкит 10

Я могу найти юникод для обычного шрифта, но не могу найти для полужирного шрифта, например, для латинского C это U+1D04, а для полужирного C это 1d402, я хочу аналогичный для Devnagari

Mittineague 11

Жирный ASCII на самом деле является «обманом», поскольку это злоупотребление предполагаемым использованием

en.m.wikipedia.org

Математические буквенно-цифровые символы

Страницы для вышедших из системы редакторов узнать больше Математические буквенно-цифровые символы — это блок Unicode, содержащий стилизованные формы латинских и греческих букв и десятичных цифр, которые позволяют математикам обозначать разные понятия с помощью разных стилей букв. Буквы в различных шрифтах часто имеют определенные, фиксированные значения в определенных областях математики. Обеспечивая единообразие в многочисленных математических статьях и книгах, эти соглашения помогают читать математические формулы. Юникод теперь включает…

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

AFAIK Символы деванагари не используются в математических формулах. Другими словами, вам понадобится один из подходов PaulOB, упомянутых в посте #5

3 лайков

12

<не по теме>
@sachinkit, можно поинтересоваться, почему изыскивается желание создать одну смелую работу в сгенерированной строке? Это школьный проект или заказ клиента?

Интересно, что примерно два или три раза в год несколько участников задают очень похожие странных вопросов в течение нескольких дней. За последние два дня как минимум 3 человека задали вопрос, очень похожий на этот. Это кажется забавным, поэтому мне просто любопытно узнать, почему.

Вы можете не отвечать, если не хотите. Мне просто очень любопытно.

2 лайков

PaulOB 13

Миттиниг:

Unicode настоятельно рекомендует не использовать эти символы в обычном тексте в качестве замены презентационной разметки;

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

4 лайков

Миттиниг 14

Действительно, скринридер говорит
«Это моя шкала Цельсия с малым расстоянием электрон»
не был бы хорошим пользовательским интерфейсом.

2 лайков

ганендра 15

Используйте пример

и поместите приведенный ниже код в CSS

.makemebold{
font-weight:600;
}

Вы можете изменить жирность, введя значение от 100 до 1000

Erik_J 16

Привет ганендра ,

Как это нацеливается только на последнее слово в этом псевдоконтенте?

ПолОБ 17

Ганендра:

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

и поместите приведенный ниже код в CSS

.

Пожалуйста, внимательно прочитайте вопрос, а затем посмотрите, как ваш ответ применим к рассматриваемой проблеме?

Эрик_Дж 18

Спасибо @ghanendra, повторное обращение к этой теме заставило меня еще раз задуматься над этой нерешенной проблемой.

@sachinkit и @PaulOB, как насчет этого:

 
Одно слово, выделенное жирным шрифтом
<стиль>
.тест{
}
.тест: до {
плыть налево;
content:"Это мой\a0";
}
.тест: после {
плыть налево;
вес шрифта: полужирный;
содержимое:"Код:\a0";
}

<тело>

 Это обычный текст в div.

Будет работать, если div содержит только одну строку текста.

Сделал JSFiddle для игры: https://jsfiddle.net/Erik_J/jhp3Lmez/

1 Нравится

ПолОБ 19

Эрик_Дж:

Будет работать, если div содержит только одну строку текста.

Да, это нормально, если строка текста не переносится

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

Хорошая мысль в любом случае

1 Нравится

20

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

Я добавил пустой диапазон в JSFiddle:

 
Выделить одно слово жирным шрифтом
<стиль>
дел {
заполнение: 1em;
}
.тест{
дисплей:блок;
переполнение: скрыто;
}
.тест: до {
плыть налево;
content:"Это мой\a0";
}
.тест: после {
плыть налево;
вес шрифта: полужирный;
содержимое:"Код:\a0";
}

<тело>

 Это работает, когда в div есть только одна строка текста. Измените размер окна для проверки.


 Это также работает, когда в div содержится более одной строки текста. Измените размер окна для проверки.

РЕДАКТИРОВАТЬ)

ПолОБ:

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

Я этого не заметил.

Затем я предлагаю сделать блок блочным дисплеем. (Отредактирован код выше.)

1 Like

Font-Weight: жирный шрифт в CSS не работает

Как бы вы ни старались, вы просто не можете сделать этот текст жирным? Хорошо, что ты заглянул сюда; у нас есть советы для вас.

Опубликовано Автор Dim NikovВ категории CSS

Ситуация следующая: вы пытаетесь выделить часть текста на веб-странице полужирным шрифтом с помощью CSS. Но даже если ваше правило CSS написано правильно, свойство font-weight: bold просто не работает.

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

Чтобы узнать, как заставить font-weight: bold работать, читайте ниже.

Почему ваше правило CSS не работает

Если ваше правило CSS для выделения текста в определенном элементе DOM жирным шрифтом отформатировано правильно, но по-прежнему не работает, возможно, оно переопределено другим правилом в одной из таблиц стилей HTML-документа. .

Мы подробно писали об этом в статье под названием «Как предотвратить переопределение CSS». Чтобы узнать подробности, прочтите этот пост, а затем вернитесь сюда и продолжите чтение. Короткую версию и быстрое исправление читайте ниже.

Итак, почему ваше правило CSS не работает?

Потому что свойство font-weight текста в рассматриваемом элементе DOM является целью другого правила CSS, которое переопределяет ваше.

Как правило, когда несколько правил CSS нацелены на одно и то же свойство одного и того же элемента DOM, то правило с наиболее конкретным селектором переопределяет другие.

 
<тело>
    
Жирный шрифт

Мы можем ориентироваться на  font-weight  свойство 

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

Вот как это работает:

 p { вес шрифта: полужирный; }
body p { вес шрифта: нормальный; }
p.bold { вес шрифта: полужирный; }
p#bold-1 {начертание шрифта: нормальное; }
/* Правила с ключевым словом !important переопределяют все остальные */
p { вес шрифта: полужирный! важно; }

В CSS это называется  специфичность . По сути, правило CSS с наиболее конкретным селектором всегда преобладает над всеми остальными.

Как заставить это работать

Есть два способа заставить font-weight: полужирный  работать для рассматриваемого элемента DOM (или элементов DOM).

Во-первых, нужно переписать селектор вашего правила CSS, чтобы он был более конкретным, чем селекторы любых других правил CSS, нацеленных на рассматриваемый элемент DOM. (При этом полезно открыть инспектор инструментов разработчика браузера и просмотреть эти селекторы.)0085 font-weight: свойство жирным шрифтом в вашем правиле CSS.

Итак, если прямо сейчас ваше правило CSS выглядит так:

 p { font-weight: bold; }

Попробуйте сделать так — и посмотрите, решит ли это вашу проблему:

 p { font-weight: bold !important; }

Если вы пытаетесь переопределить правило CSS, встроенное в атрибут  style=""  элемента DOM, этот метод будет единственным, который будет работать.

В заключение

Помните: Когда вес шрифта: полужирный не работает, ваше правило CSS, скорее всего, переопределяется другим правилом CSS с более конкретным селектором.

Перепишите правило CSS с более конкретным селектором или добавьте ключевое слово !important  в конец объявления свойства, и вы сможете заставить его работать.

Спасибо, что дочитали до этого места, и, если у вас есть какие-либо вопросы или вы хотите поделиться своими советами с остальными читателями этого поста, не стесняйтесь оставлять ответ ниже.

Дим Ников

Редактор Maker’s Aid. Наполовину программист, наполовину маркетолог. Создавать вещи в Интернете и помогать другим делать то же самое с 2000-х годов. Да, у меня были Friendster и Myspace.

Посмотреть все сообщения Дима Никова.

сообщить об этом объявлении
  • Создайте хэш в Zapier с помощью этих простых шагов
Оставить комментарий

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

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