Наклонный текст – Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

Вертикальный и наклонный текст — Блог Игоря Штанга — ЖЖ

Иногда мне задают хорошие вопросы, на которые хочется ответить в блоге. Буду отвечать под тегом ??? Вот, например, Андрей спрашивает: Не смог найти информацию о вертикальных заголовках. Как к ним стоит относиться?

Вкратце: вертикальный текст читать сложнее, чем горизонтальный. Если вы это понимаете, делайте что хотите.

Есть по крайней мере две «объективные» причины поставить текст вертикально:

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


2. Вертикальное положение диктует формат. Например, корешок книги или вытянутый в высоту банер.

«Необъективных» причин — миллион: контраст, динамика, напряжение, ритм, дизайнерский произвол в конце концов. Изящное композиционное решение может быть бессмысленным и нецелесообразным, в этом нет ничего криминального.

Для сравнения: Бюро Артема Горбунова может позволить себе поставить вертикально только слово up, Бюро Зигфрида Одерматта — любое слово:

Зигфрид Одерматт. Реклама сушильной машины, 1960

Чтобы вертикальный текст всё-таки остался текстом, нужно соблюсти типографическую гигиену. Атабеков в «Словаре-справочнике иллюстратора научно-технической книги» приводит следующие рекомендации (статья «Текст на графических оригиналах»):

Все надписи (фразы, слова или отдельные знаки) должны быть расположены так, чтобы они легко читались (рис. II): горизонтальные — слева-направо; вертикальные — снизу-вверх; наклонные — слева-вверх-направо либо слева-вниз-направо и при этом все буквы в строке должны строго держать линию.

Как наклонить текст в фотошопе?

Функции фотошопа не ограничены обработкой графических файлов. Данная программа также имеет большое количество встроенных инструментов для работы с текстом. Иногда перед пользователем стоит задача – наклонить буквы. Какими способами можно это сделать? Как наклонить текст в фотошопе?

Решить отмеченную задачу, в принципе, вполне реально разными способами. Чаще всего осуществление рассматриваемого действия – «наклон» текста – предполагает:

При этом отмеченные методы наклона текста могут задействоваться в различных сочетаниях. Изучим особенности их использования подробнее. Для этого мы будем задействовать программу Photoshop в версии CS6 – одну из самых распространенных в России и в мире, с английским интерфейсом.

Написание текста в фотошопе курсивом

Как известно, компьютерный шрифт, применяемый при создании текстов, может отображаться на экране в таких вариантах:

• обычный;
• полужирный;
• наклонный – курсив;
• подчеркнутый.

А также – в различных их сочетаниях. При этом важно, чтобы конкретный текстовый редактор поддерживал наборы шрифтов, способных отображаться в соответствующих режимах. В частности, в некоторых версиях фотошопа можно обнаружить шрифты, которые имеют только обычный и полужирный варианты.

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

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

Наклон текста с помощью опции курсива – самый простой. Как правило, возникает необходимость в дополнительных операциях с ним. Фотошоп содержит довольно много инструментов для их осуществления. Далее мы изучим то, как наклонить текст в Photoshop посредством таковых.

к содержанию ↑

Наклон букв при горизонтальном положении текста

Популярен способ наклона текста, который предполагает соответствующую трансформацию букв при сохранении горизонтального положения слов. В фотошопе для этого нужно задействовать инструмент Rectangular Marquee Tool. Располагается он вторым сверху в панели инструментов, расположенной слева.

Выбрав соответствующий инструмент, следует навести мышку примерно на середину текста, кликнуть правой кнопкой и выбрать опцию Free Transform. После того как вокруг текста появится рамка, надо вновь кликнуть на нем правой кнопкой и выбрать опцию Skew.

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

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

При этом сохранится вертикальная ориентация букв.

к содержанию ↑

Поворот слова

Следующая возможность, которая нередко пригождается пользователю, – поворот текста. Для того чтобы задействовать ее, необходимо вновь выбрать инструмент Rectangular Marquee Tool, кликнуть на тексте правой кнопкой, нажать на Free Transform, а затем – Rotate.

После этого можно будет «крутить» текстом в любую сторону, используя 8 ползунков, которые располагаются на рамке.

к содержанию ↑

Отображение текста в виде фигуры

Еще один вариант «наклона» текста – его синхронизация с контурами некоторой фигуры. Для того чтобы задействовать данную возможность в фотошопе, следует выбрать инструмент Text, выделить слово, после – кликнуть на значке Create Warped Text, располагающемся справа от основных атрибутов шрифта.

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

С помощью опций Bend, Horizontal Distortion и Vertical Distortion можно тем или иным образом трансформировать «флаг», а также, соответственно, текст, который с ним синхронизирован.

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

Наклонный шрифт Википедия

Наклонный шрифт (англ. Oblique type) — шрифт с наклонным начертанием, в большинстве случаев представляющим собой механически наклоненное прямое начертание.

Наклонный и курсивный шрифты[ | ]

Наклонный шрифт не следует путать с курсивным шрифтом. Курсивный шрифт представляет собой особый, специально созданный вариант шрифта с разнообразными глифами, часто отличающимися по строению от глифов того же шрифта в прямом начертании. Наклонный же шрифт — механически наклоненный в сторону шрифт, сохраняющий строение глифов прямого начертания. Более того, курсивный шрифт может практически не иметь наклона; наклонный же шрифт, как явствует из наименования, наклон — чаще всего вправо — иметь обязан. Также наклонное начертание не должно содержать соединительных завитков^[1].

Использование[ | ]

шрифт типа А с наклоном

Широкого распространения наклонное начертание не получило, поскольку для логического ударения или иного выделения информации в тексте традиционно используются курсивное и полужирное начертания. Тем не менее, иногда такое начертание автоматически генерируется вычислительной системой в том случае, когда необходимо отобразить на дисплее курсив, однако в системе курсивный вариант требуемого шрифта отсутствует^[2]. В некоторых шрифтовых семьях, однако, присутствует и специально созданная шрифтовая гарнитура с наклонным начертанием.

Наклонный шрифт применяется в чертежах. Согласно ГОСТ 2.304—81, которому должны соответствовать надписи, сделанные от руки на конструкторских документах, необходимо использовать специальный чертёжный шрифт как и в обычном начертании, так и в наклонном, причём наклон необходимо соблюдать около 75°^[3]

.

CSS[ | ]

Для отображения на веб-странице наклонного шрифта употребляется следующий CSS: font-style: oblique;^[4]. Пример:

Наклонный текст, а не курсив.
Курсив, а не наклонный текст.

См. также[ | ]

Как в Word написать текст под любым углом и задом наперед

Как в Word написать текст под любым углом и задом наперед

Сегодняшний разговор является, в некоторой степени, продолжением темы «Вертикальный текст». Помимо текста, написанного горизонтально и вертикально, нам может понадобиться написать текст, например под определённым углом, а то и вовсе сделать «лежащим» или наклонённым. Обо всём этом мы сегодня и поговорим.

Помогать нам будет инструмент: «Нарисовать надпись». Откроем вкладку «Вставка» верхнего меню и сконцентрируем своё внимание лишь на двух, содержащихся в ней функционалах: «Фигуры» и «Надпись»:

Оба этих функционала содержат один и тот же инструмент (опцию) «Нарисовать надпись». Раскроем содержание функционала «Фигуры» и посмотрим, где находится инструмент «Нарисовать надпись»:

Итак, инструмент «Нарисовать надпись» находится в разделе набора фигур «Основные фигуры». Если мы однажды воспользовались данным инструментом или какой-то фигурой, то эти фигуры отражаются в верхнем разделе, с названием «Последние использованные фигуры».

Теперь, не покидая вкладку «Вставка», переместим курсор мыши в её раздел «Текст» и нажмём значок «Надпись» и в открывшемся окне обратим внимание на опцию «Нарисовать надпись»:

Это и есть всё тот же инструмент. Так что, мы имеем два варианта активизации инструмента, каким бы мы путём не пошли. Подтверждением активности инструмента «Нарисовать надпись» будет видоизменение курсора — он превратится в перекрестие из двух маленьких линий:

Нажав и удерживая левую кнопку мыши, создадим поле для текста, — нарисуем прямоугольник. Курсор автоматически окажется внутри прямоугольника, и мы можем начать ввод текста:

Итак, ввод текста завершён, можно начинать его поворачивать:

Прошлый раз, когда мы говорили о «вертикальном тексте», то поворот текста осуществляли, схватившись за верхний зелёного цвета маркер. Сегодня же мы будем действовать иначе. Я добавлю в поле ещё две строки текста в качестве примера.

В тот момент, когда мы закончили рисовать поле для будущего текста и отпустили левую кнопку мыши, в верхнем меню произошли существенные изменения. Совершенно самостоятельно (автоматический режим) на смену опциям вкладки «Вставка» пришли другие опции другой вкладки «Формат»:

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

Для чего же нам делать поле невидимым? А для того, чтобы в случае написании текста на фоне с цветом отличным от белого рабочая область поля не была видна.

Итак, сделаем поле прозрачным, воспользовавшись некоторыми опциями вкладки верхнего меню «Формат». Наша задача сделать поле действительно прозрачным (сейчас оно белого цвета) и убрать его контур.

Начнём с удаления контура. Для этого раскроем содержание опции «Контур фигуры» и в перечне выберем вариант «Нет контура»:

Теперь сделаем поле прозрачным, то есть заливку белым цветом сведём к нулю. С этой целью выберем опцию «Заливка фигуры» и в раскрывшемся перечне вариантов, выберем вариант «Нет заливки»:

Такой вариант не всегда может нас устроить, по той причине, что под «нет заливки» подразумевается отсутствие заливки цветом отличным от белого цвета, а также градиентной заливки и заливки текстурой. То есть, поле, как было белого цвета, таким оно и осталось. В данном конкретном случае это ненужное действие. Сейчас я размещу под текстом треугольник, и мы в этом убедимся:

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

Если поле текста не выделено, то щелчком мыши в области текста, выделим его (поле захватили маркеры). Щелчком левой кнопки мыши по стрелочке в нижнем правом углу раздела «Стили фигур» вкладки «Формат», развернём окошко дополнительных настроек поименованное «Формат фигуры»:

В этом окошке отображаются те настройки, которые имеет поле на текущий момент. К полю применена сплошная заливка белым цветом на 100%, так как уровень прозрачности равен 0%:

Для того чтобы поле стало абсолютно прозрачным, нам необходимо передвинуть ползунок прозрачности вправо до появления в строке-окошке значения равного 100%. Если ползунок перемещать плавно, то мы можем наблюдать за тем, как поле текста становится всё более прозрачным:

Установив значение уровня прозрачности 100%, нажмём кнопку «Закрыть»:

И вот результат наших действий:

Теперь перейдём к повороту текста, а так же его наклону.

Для того чтобы вертеть текст так, как нам только того захочется, мы должны, не покидая и не сворачивая вкладку «Формат» верхнего меню, обратиться к опции «Эффекты фигур»:

И в открывшемся перечне действий выбрать пункт «Поворот объёмной фигуры»:

Нам откроется новое окошко детализации, где мы остановим свой выбор на пункте «Параметры поворота объёмной фигуры»:

И вот, наконец-то, мы добрались до окна настройки параметров:

В строках, где сейчас мы видим нулевые значения углов поворота текста по осям X, Y, Z, мы устанавливаем нужные значения, наблюдая за тем, как поворачивается или наклоняется текст. Мы можем устанавливать углы по всем трём осям координат, двум или одной. А можем воспользоваться значками с синими стрелочками, расположенными в два столбика правее строк ввода цифр (значений улов наклона и поворота). Всё что мы должны делать, так это щелкать левой кнопкой мыши по этим самым значкам и смотреть на то, что происходит с текстом:

Для того чтобы в этом окошке оказаться ещё быстрее, нам нужно щёлкнуть левой кнопкой мыши внутри текста для его выделения, а затем нажать маленькую стрелочку в правом нижнем углу раздела «Стили фигур»:

Нужно всегда сначала выделять текст, созданный с использованием инструмента «Нарисовать надпись», для того чтобы в верхнем меню появилась необходимая вкладка «Формат» средств рисования. И после её появления в верхнем меню, щелчком левой кнопки мыши по названию, разворачиваем содержимое.

И это нужное окошко к нашим услугам:

И чтобы мы могли начать установку параметров, нам нужно выбрать уже знакомую опцию «Поворот объёмной фигуры»:

Нам вовсе не обязательно вписывать значения углов в какие-то строки осей координат или щёлкать значки с синими стрелками правее строк ввода значений. Мы можем воспользоваться заготовками, набор которых расположен в верхней части окна настроек параметров:

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

Щёлкая стрелочками «вверх» и «вниз» мы можем делать текст в перспективе:

Если, например, по оси Х мы установим значение 180 градусов, то наш текст будет «задом наперёд»:

Для дополнительного воздействия на текст, мы, в этом же окошке, можем воспользоваться опцией «Надпись»:

Ну и в заключении сегодняшнего разговора о том как повернуть текст под углом, а также как наклонить текст, хочу обратить внимание на важный момент. Для того чтобы мы крутили текстом как пиццайоло тестом, в квадратике с названием «Оставить текст плоским» не должно быть галочки:

Оставить комментарий

Как форматировать текст в сообщениях Telegram

С помощью спецсимволов

Где работает: Android, iOS, Windows, macOS, Linux.

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

1. Полужирное начертание — две звёздочки (**) с каждой стороны.

2. Курсив — два символа подчёркивания (__) с каждой стороны.

3. Моноширинный шрифт — три знака апострофа (‘) с каждой стороны.

С помощью клавиатурных сокращений

Где работает: macOS, Windows, Linux.

Для форматирования текста нужно его выделить и воспользоваться стандартными клавиатурными сокращениями:

1. Полужирное начертание — Ctrl/Cmd + B.
2. Курсив — Ctrl/Cmd + I.
3. Моноширинный текст — Ctrl/Cmd + Shift + M.
4. Очистка форматирования — Ctrl/Cmd + Shift + N.

В первом случае результат будет выглядеть так:

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

С помощью бота @bold

Где работает: Android, iOS, Windows, macOS, Linux.

Для выделения текста этим способом надо в начале сообщения набрать @bold, потом ввести текст. Бот предложит три варианта его форматирования: полужирное начертание, курсив, шрифт разработчиков.

Неудобство данного метода в том, что форматироваться будет весь текст, а не отдельная фраза. Кроме того, в сообщении будет отмечено, что оно сформировано с помощью бота. Так что лучше всё-таки использовать первые два способа.

С помощью сайта 4txt.ru

Где работает: Android, iOS, Windows, macOS, Linux.

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

Далее вставьте скопированный текст в Telegram и отправьте сообщение.

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

Telegram →

Цена: Бесплатно

Цена: Бесплатно

Разработчик: Разработчик

Цена: Бесплатно

Читайте также

Свойства текста | htmlbook.ru

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами

Свойство	Значение	Описание	Пример
font-family	имя шрифта	Задает список шрифтов	P {font-family: Arial, serif}
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт	P {font-style: italic}
font-variant	normal small-caps	Капитель (особые прописные буквы)	P {font-variant: small-caps}
font-weight	normal lighter bold bolder 100–900	Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный	P {font-weight: bold}
font-size	normal pt px %	нормальный размер пункты пикселы проценты	font-size: normal font-size: 12pt font-size: 12px font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Шрифт</title>
  <style type="text/css"> 
   h2 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <h2>Заголовок</h2>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

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

Табл. 2. Результат использования различных параметров шрифтов

Пример	Пример	Пример	Пример	Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light	font-size: large; font-weight: bold	font-family: Arial, sans-serif; font-size: x-small; font-weight: bold	font-variant: small-caps	font-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста

Свойство	Значение	Описание	Пример
line-height	normal множитель значение %	Интерлиньяж (межстрочный интервал)	line-height: normal line-height: 1.5 line-height: 12px line-height: 120%
text-decoration	none underline overline line-through blink	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста	text-decoration: none
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: capitalize
text-align	left right center justify	Выравнивание текста	text-align: justify
text-indent	значение %	Отступ первой строки	text-indent: 15px; text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста

Пример: и это все о нем	Пример: текст по центру	Пример: Это не ссылка, а просто текст	Пример: отступ первой строки	Пример: полуторный межстрочный интервал
text-transform: capitalize	text-align:center	text-decoration: underline	text-indent: 20px	line-height: 1.5

Изогнутый текст вокруг круга или другой фигуры

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

1. Перейдите к разделу вставка > WordArtи выберите нужный стиль WordArt.

   

   Примечание: Значок WordArt находится в группе текст и может различаться в зависимости от используемой версии и размера экрана. Значок может также выглядеть так, как это или .

2. Замените текст заполнителя на собственный текст.

3. Выделите свой текст WordArt.

   

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

   

Примечание: В зависимости от размера экрана могут отображаться только значки стилей WordArt.

Дополнительные методики

Обтекание вокруг круга    Чтобы создать текст, полностью обменяющий фигуру, выберите пункт круг в разделе подписаться на пути, а затем перетащите любой из маркеров изменения размера, пока объект WordArt не станет нужного размера и формы.

Обтекание вокруг ровных кромок    Чтобы обтекание текста вокруг фигуры, содержащей ровные края, например прямоугольника, вставьте объекты WordArt для каждого края. В этом примере объект WordArt вставлен четыре раза, по одному для каждой стороны фигуры.

Группа перемещения и копирование    Чтобы переместить или скопировать несколько объектов WordArt как одну фигуру, ознакомьтесь с разделами группирование и разгруппировка фигур, рисунков или других объектов .

Точный элемент управления «угол»    Угол наклона текста WordArt по отношению к фигуре можно точно настроить с помощью инструмента вращения.

Если вам нужен очень точный контроль или вы создаете сложное сочетание фигур и текста, вы можете создать текст вокруг фигуры с помощью сторонней программы рисования и скопировать и вставить его в документ Office.

См. также

Добавление фигур

Вставка объекта WordArt

Создание изогнутого или кругового текста WordArt

1. Перейдите к разделу вставка > WordArt.

2. Выберите нужный стиль WordArt.

   

3. Введите текст.

4. Выделите текст WordArt.

   

5. Перейдите к разделу Формат фигуры > текстовые эффекты > преобразуйте и выберите нужный эффект.

   

Дополнительные методики

Обтекание вокруг круга    Чтобы создать текст, полностью обменяющий фигуру, выберите пункт круг в разделе подписаться на пути, а затем перетащите любой из маркеров изменения размера, пока объект WordArt не станет нужного размера и формы.

Обтекание вокруг ровных кромок    Чтобы обтекание текста вокруг фигуры, содержащей ровные края, например прямоугольника, вставьте объекты WordArt для каждого края. В этом примере объект WordArt вставлен четыре раза, по одному для каждой стороны фигуры.

Группа перемещения и копирование    Чтобы переместить или скопировать несколько объектов WordArt как одну фигуру, ознакомьтесь с разделами группирование и разгруппировка фигур, рисунков или других объектов .

Точный элемент управления «угол»    Угол наклона текста WordArt по отношению к фигуре можно точно настроить с помощью инструмента вращения.

Если вам нужен очень точный контроль или вы создаете сложное сочетание фигур и текста, вы можете создать текст вокруг фигуры с помощью сторонней программы рисования и скопировать и вставить его в документ Office.

В Веб-приложение Word вы можете увидеть объект WordArt, который уже есть в документе, но добавить другие объекты WordArt, чтобы открыть или изменить документ в классической версии Word.

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