Как сделать текст тонким css
Перейти к содержимому

Как сделать текст тонким css

  • автор:

HTML текст, размер шрифта, форматирование текста

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст:

  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → HTML текст, размер больше обычного (крупный шрифт).
  • Теги → HTML текст, размер меньше обычного (мелкий шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги → зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги → HTML текст (шрифт) в нижнем индексе.
  • Теги → HTML текст (шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

. жирный шрифт

Результат: . жирный шрифт

. моноширинный шрифт

Результат: . моноширинный шрифт

. размер шрифта больше обычного

Результат: . размер шрифта больше обычного

. размер текста меньше обычного

Результат: . размер текста меньше обычного

. наклонный шрифт

Результат: . наклонный шрифт

подчеркнутый текст (подчеркнутый шрифт)
зачеркнутый текст (зачеркнутый шрифт)

Результат: зачеркнутый текст (зачеркнутый шрифт)

нижний индекс

Результат: нижний индекс

верхний индекс

Результат: верхний индекс

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

HTML размер шрифта и текста



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

Текст высотой 9 пикселей

Текст высотой 12 пикселей

Текст высотой 15 пикселей

Текст высотой 18 пикселей


HTML текст, подчеркнутый, зачеркнутый

Атрибуты style=»» со значениями есть линейные CSS включения.

Дело в том, что чистый HTML не используется при создании сайтов и нет никакого смысла тратить время на изучение некоторых его элементов, которые вы забудете, начав изучение второй ступени сайтостроения — Cascading Style Sheets. Такой подход существенно съэкономит ваше время! К тому же, в пятой, новой версии HTML, которая пока еще не получила официальный статус рекомендации, не поддерживаются теги , с помощью которых в HTML 4.01 можно было установить размер шрифта.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML заголовки Текст и HTML размер шрифта Цвет HTML текста

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML размер шрифта и текста? – Не вопрос!

Свойство font-weight, насыщенность шрифта

Ещё один параметр шрифта, которым мы можем управлять — это насыщенность или толщина шрифта. Шрифт может быть жирнее или тоньше обычного начертания. Устанавливается насыщенность с помощью свойства font-weight . В качестве значения можно использовать ключевое слово или число. Самые часто встречающиеся значения:

  • 400 или normal — обычный шрифт, значение по умолчанию;
  • 700 или bold — жирный шрифт.
h1 < font-weight: 400; /* то же самое что и normal */ >p < font-weight: bold; /* то же самое что и 700 */ >

На самом деле, font-weight может принимать одно из девяти числовых вариантов насыщенности:

  • 100: Thin;
  • 200: Extra Light (Ultra Light);
  • 300: Light;
  • 400: Normal;
  • 500: Medium;
  • 600: Semi Bold (Demi Bold);
  • 700: Bold;
  • 800: Extra Bold (Ultra Bold);
  • 900: Black (Heavy).

Все эти числовые значения задают степень толщины шрифта от самого тонкого до самого толстого.

Но в большинстве системных шрифтов всё равно есть только два варианта толщины: обычный normal (400) и жирный bold (700). Поэтому и остальные значения свойства используются реже.

Кроме перечисленных выше числовых значений у font-weight может быть ещё два относительных значения: bolder и lighter . Эти значения делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

font-style

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    font-style   

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Применение свойства font-style

Рис. 1. Применение свойства font-style

Объектная модель

[window.]document.getElementById(» elementID «).style.fontStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Браузеры текст со значением oblique всегда отображают как курсив ( italic ).

Тонкий и толстый шрифт

шрифт как на фото

Как сделать шрифт тоньше и толще чем font-weight: 100/900? Сделал font-weight: 100 все равно толще чем на скрине получается

Отслеживать

задан 8 июл 2018 в 0:08

492 2 2 золотых знака 6 6 серебряных знаков 13 13 бронзовых знаков

А пример кода? Может подключен шрифт с более толстыми начертаниями?

8 июл 2018 в 0:25

Воспользуйтесь этими атрибутами, чтобы достичь желаемого результата.

8 июл 2018 в 0:33

Скрин не с моего кода. А у меня обыкновенный, стандартный Arial

8 июл 2018 в 0:53

Скрин вообще не кода. Нужен проблемный код, чтобы не ванговать!

8 июл 2018 в 0:58

Также может быть проблема, если оборачиваешь текст в заголовок.

8 июл 2018 в 1:00

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Я вот специально подобрал тонкие шрифты .. на примере mini-landing в сниппете

$(window).on("load resize", function() < var width = $(this).width(); var height = $(this).height(); $(".width").text(width); $(".height").text(height); >)
* < margin: 0; padding: 0; max-width: 100%; >html, body < font-family: 'Nanum Gothic', sans-serif; font-size: 20px; >header, section, .col < height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; >h1, h2, h3, h4 < font-weight: 100; padding: 10px 0; >section.row < display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; height: 100vh; >section.row div < width: 100%; text-align: center; padding: 10px; >section.row div img < border-radius: 50%; >section.row div p < font-family: 'Amatic SC', cursive; font-weight: 100; >.panel < position: fixed; top: 10px; left: 10px; >@media screen and (max-width:600px) < section.row < display: flex; flex-direction: column; justify-content: center; width: 90%; margin: auto; >>
    

Hi , i am junior front end developer

I decide every day what are the tasks

apply ScrollMagic and Gsap

scills

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sed fugit cumque debitis rerum beatae distinctio sunt voluptatum, reprehenderit repellendus!

profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vitae.

portfolio

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iure, explicabo eaque. Similique nulla modi facere cum at optio alias, ipsa quia quae animi, unde rem illo, saepe, repudiandae aliquid.

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

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