Css толщина текста: Курсив и жирный шрифт CSS — учебник CSS

Leave a Comment / Css / By /

Содержание

Толщина шрифта — Tailwind CSS

​Основы использования

​Установка толщины шрифта

Управляйте толщиной шрифта элемента с помощью утилит font-{weight}.

font-light

Быстрая коричневая лиса прыгает через ленивую собаку.

font-normal

Быстрая коричневая лиса прыгает через ленивую собаку.

font-medium

Быстрая коричневая лиса прыгает через ленивую собаку.

font-semibold

Быстрая коричневая лиса прыгает через ленивую собаку.

font-bold

Быстрая коричневая лиса прыгает через ленивую собаку.

<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса . ..</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:font-bold to only apply the font-bold utility on hover.

<p>
  <!-- ... -->
</p>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:font-bold to apply the font-bold utility at only medium screen sizes and above.

<p>
  <!-- .
  .. -->
</p>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет девять утилит font-weight. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.fontWeight вашей конфигурации Tailwind.

tailwind.config.js

module.exports = {
  theme: {
    fontWeight: {
      hairline: 100,
      'extra-light': 100,
      thin: 200,
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      extrabold: 800,
      'extra-bold': 800,
      black: 900,
    }
  }
}

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

​Произвольные значения

If you need to use a one-off font-weight value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<p>
  <!-- ... -->
</p>

Learn more about arbitrary value support in the arbitrary values documentation.

Шпаргалка CSS для управления шрифтом и текстом / Все о дизайне / Pollskill

Василий Александров · ·

794

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

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

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

font-size:


p {
    font-size: 0px;
}

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

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

text-indent:


p {
    text-indent: 0px;
}

Межстрочное расстояние

Lorem Ipsum — это текст-«рыба»,
часто используемый в печати и вэб-дизайне.

line-height:


p {
    line-height: 0px;
}

Межбуквенное расстояние

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

letter-spacing:


p {
    letter-spacing: 0px;
}

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

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

font-weight: normalbold


p {
    font-weight: normal;
}

Cтиль шрифта

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

font-style: normalitalic


p {
    font-style: normal;
}

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

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

font-family:

Noto Sans , sans-serifVerdana , sans-serifTimes New Roman , sans-serif


p {
    font-family: normal;
}

Горизонтальное выравнивание текста

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

text-align: leftrightcenterjustify


p {
    text-align: left;
}

Преобразованием текста в заглавные или прописные символы

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

text-transform: noneuppercasecapitalizelowercase


p {
    text-transform: none;
}

Цвет шрифта

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне.

color: 

p {
    color: #fe234f;
}

Интересные материалы

Вход через социальные сети:
ВКонтакте Yandex

Регистрация Забыли пароль?

Забыли пароль

Имя пользователя

Или Электронная почта

Вход Регистрация

javascript — как сделать шрифт толще 900 с помощью css

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

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 501 раз

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

Я нашел это в Интернете, но, к сожалению, это не работает. есть ли другой способ сделать это?

 ч2{
  тень текста: 1px 0 #888888;
  интервал между буквами: 1px;
  вес шрифта: полужирный;
} 
  
СДЕЛАТЬ ЭТО ЖИРНЫМ

это выше не работает и поддерживает ту же стандартную толщину, что и у меня.

пожалуйста, дайте мне знать другие решения.

  • JavaScript
  • HTML
  • CSS

0

использовать штрих-текст 

 .box {
  межбуквенный интервал: 5px;
  размер шрифта: 30px;
  вес шрифта: 900;
  семейство шрифтов: без засечек;
}
.й {
  -webkit-text-stroke: 3px;
  обводка текста: 3px;
} 
 
Здравствуй, мир


HELLO WORLD

Или много text-shadow:

 .box {
  межбуквенный интервал: 5px;
  размер шрифта: 30px;
  вес шрифта: 900;
  семейство шрифтов: без засечек;
}
.й {
  text-shadow:0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px;
} 
 
Здравствуй, мир


ЗДРАВСТВУЙ, МИР

0

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

Но забудьте об этом ответе, текстовый штрих — это то, что вам нужно.

 h2{
  интервал между буквами: 1px;
  семейство шрифтов: "Comic Sans MS", "Comic Sans", скоропись;
  вес шрифта: полужирный;
  фильтр:
    падающая тень (1px 1px 0 #000)
    падающая тень (-1px -1px 0 #000)
    падающая тень (1px -1px 0 #000)
    падающая тень (-1px 1px 0 #000)
} 
  
Вот это смело

Другой способ — использовать text-shadow , чтобы добавить к тексту

 .bold {
  межбуквенный интервал: 1px;
  размер шрифта: 1em;
  вес шрифта: 900;
}
.extra-жирный {
  тень текста: 0px 1px, 1px 0px, 1px 1px;
} 
 
Выделить жирным шрифтом


Выделите жирным шрифтом

Рассмотрите возможность использования фильтров SVG

 h2{
  тень текста: 1px 0 #888888;
  интервал между буквами: 1px;
  вес шрифта: полужирный;
  фильтр: URL-адрес (# f1)
} 
  
СДЕЛАЙТЕ ЭТО ЖИРНЫМ
 

<определения>
  <фильтр>

Та же комбинация фильтров, но вместо поверх

используется оператор xor оператор

 h2{
  тень текста: 1px 0 #888888;
  интервал между буквами: 1px;
  вес шрифта: полужирный;
  фильтр: URL-адрес (# f1)
} 
  
СДЕЛАЙТЕ ЭТО ЖИРНЫМ
 
 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          >
<определения>
  <фильтр>

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Толщина шрифта — Tailwind CSS

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

​Установка толщины шрифта

Управление толщиной шрифта элемента с помощью утилит font-{weight} .

шрифт-свет

Быстрая коричневая лиса прыгает через ленивую собаку.

нормальный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

шрифт-средний

Быстрая коричневая лиса прыгает через ленивую собаку.

полужирный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

полужирный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

 
Быстрая коричневая лиса...


Быстрая коричневая лиса...


Быстрая коричневая лиса...


Быстрая коричневая лиса...


Быстрая коричневая лиса...

​Применение условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:font-bold , чтобы применить только font-bold 9Утилита 0034 при наведении.

 <р>

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

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

 <р>

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

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет девять утилит с начертанием шрифта .

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

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