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

Как поменять стиль текста в css

  • автор:

Как изменить стиль текста в html

Для изменения размера шрифта необходимо использовать свойство font-size . Если необходимо свойство определяющее каким образом шрифт должен быть стилизован нужно применить font-style , в случае если нам надо сменить семейство шрифта, подойдет font-family .

 Этот шрифт будет размером в 20px, без засечек, начертание курсивом 
p  font-size: 20px; font-style: italic; font-family: sans-serif; > 

Как поменять стиль текста в css

Firefox

turbot Участник Группа: Members Зарегистрирован: 09-10-2011 Сообщений: 2529 UA: 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov

Код:
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @-moz-document url-prefix("chrome://"),url-prefix("view-source:"),url-prefix("about:"),url-prefix("data:") < .CodeMirror,.devtools-monospace,#viewsource < font: 400 14px/16px "Liberation Mono"!important; /*насыщенность(font-weight), размер шрифта(font-size)/line-height, шрифт(font-family)*/ >>

— держите. Проверил, работает и в userChrome.css. (хотя, не всё, если нужно еще и для кода страниц (#viewsource), то продублируйте стиль в userContent.css)

Отредактировано turbot (20-05-2015 19:12:39)

№6 20-05-2015 20:32:43

Firefox

EgorSokolov Участник Группа: Members Зарегистрирован: 30-12-2006 Сообщений: 122 UA: 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Нет, вы знаете, ни фига что-то у меня это не меняет шрифт. Поместил ваш код сразу в оба файла: userChrome.css, userContent.css — никакого результата! По-прежнему эта проклятущая штатная мелкота «Courier New».

№7 20-05-2015 20:47:52

Firefox

turbot Участник Группа: Members Зарегистрирован: 09-10-2011 Сообщений: 2529 UA: 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov
Заданный в стиле шрифт должен наличествовать в системе. Еще может причина в версии вашего браузера. В дэвтулз многое поменялось с 24-ой (ставить проверять лень).

Отредактировано turbot (20-05-2015 20:48:19)

№8 20-05-2015 21:32:17

Firefox

EgorSokolov Участник Группа: Members Зарегистрирован: 30-12-2006 Сообщений: 122 UA: 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Заданный в стиле шрифт должен наличествовать в системе.

Я назначал шрифт, который в моей системе прописан (ну в смысле, что ваш «Liberation Mono» менял на «Fixedsys Excelsior 3.01»). Для надежности, пробовал даже verdana, которая уж по-любому должна быть.

Отредактировано EgorSokolov (20-05-2015 21:34:57)

№9 20-05-2015 22:29:09

Firefox

turbot Участник Группа: Members Зарегистрирован: 09-10-2011 Сообщений: 2529 UA: 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

thumb.jpg

EgorSokolov
Проверил на 24-ой, работает. Единственное, .viewContainer еще добавить нужно, для scratchpad’а.

Ищите причину у себя.

№10 21-05-2015 02:12:39

Firefox

EgorSokolov Участник Группа: Members Зарегистрирован: 30-12-2006 Сообщений: 122 UA: 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Ищите причину у себя.

Мне кажется, я нашел причину. Сначала я добавлял код в userChrome.css, где уже были некоторые настройки (они не имеют отношения к DeveloperTools, это просто разные твики интерфейса FireFox) и добавленный код ни фига не работал. Но мне вдруг пришло в голову создать userChrome.css только с вашим кодом (т.е. кроме этого кода в нем ничего нет) и — о чудо! — шрифт изменился! Короче, затык был вот в чём.

@namespace url(«http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul»); /* строка в моём старом userChrome.css */
@namespace

xul

url(«http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul»); /* правильная строка в userChrome.css */

В моём старом CSS не было «XUL» (я его пометил). После того, как я его добавил, код заработал. Почему там этого «XUL» не было, не знаю. Шаблон userChrome.css я взял давно из какого-то FireFox, когда вместе с ним (с FireFox’ом) уже шел образец userChrome-example.css (ну или как он там назывался, точно уже не помню). Во всяком случае все мои прежние настройки с тем шаблоном нормально работали, поэтому я даже не думал об этой мелочи и не обращал на неё внимания.

:)

P.S. за код вам большое спасибо, теперь хоть видимость нормальная стала

№11 21-05-2015 02:53:35

Firefox

turbot Участник Группа: Members Зарегистрирован: 09-10-2011 Сообщений: 2529 UA: 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Она и без — правильная. Но только почему-то в этом случае не работает.

(А вторую строчку (с html), если вам не нужен этот стиль для исходного кода страницы (что в окне открывается), можете вообще удалить. Тем более, что она будет работать только в userContent.css или Stylish’е)

№12 21-05-2015 23:49:23

Firefox

EgorSokolov Участник Группа: Members Зарегистрирован: 30-12-2006 Сообщений: 122 UA: 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

У меня насчёт Tools > Web Deleloper > Inspector возник еще вопросик. Я сразу этого не заметил, это в принципе мелочь, но просто хотелось бы «допилить» его, так сказать, до полного «орднунга». Так вот, если на веб-странице есть какие-то комментарии (ну т.е. то, что заключено в

:)

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

И еще. Знаете, если уж зашел разговор об просмотровщике кода веб-страниц (если я правильно понимаю, то речь идет об окне, которое открывается по клавиатурной комбинации CTRL + U), то я ради интереса решил настроить и его. Поместил в userContent.css вот такой код:

Код:
@-moz-document url-prefix(view-source:) < #viewsource < font-family: "Fixedsys Excelsior 3.01" !important; font-size: 12pt !important; background-color: rgb(255, 248, 220); >>

Это сработало, но есть 2 момента, которые можно бы улучшить, только я не знаю как это сделать.

(1). — в расцветке кода страницы применён курсив и жирный шрифт. Мне это не нравится потому что курсив на мониторах я вообще терпеть не могу а мой кастомный «Fixedsys Excelsior» уже сам по себе имеет плотное начертание, а в жирном виде он становится толстым (ну т.е. его нет смысла делать жирным). Как я понимаю, где-то должна быть CSS-ка, где описана эта расцветка, таким образом, если поковырять эту CSS-ку, то можно изменить расцветку. Но я не могу найти эту CSS-ку.

(2). — фон окна просмотровщика — background-color не заполняет всё окно в том случае если есть длинные строки, которые не влазят по ширине экрана (т.е. когда в его окне есть горизонтальный скролл). Фон заполняет только видимую часть экрана, а если проскроллить код вправо, то там уже будет белый фон. — Вот этот белый фон тоже хотелось бы как-то убрать … (извините, что не выкладываю скриншот, просто муторно возиться, но я думаю понятно, о чём я говорю).

Как изменить стиль элементов дизайна витрины¶

Для изменения стиля (шрифт, цвет) отдельных элементов дизайна (ссылки, текст и т.д.):

  1. В панели администратора откройте страницу Дизайн → Темы.
  2. В разделе Выбранная тема нажмите кнопку Редактор тем рядом с макетом, который вы хотите изменить

Меняем шрифты¶

  1. В панели Редактора тем выберите в выпадающем списке Редактировать вариант Шрифты.
  2. Выберите элемент, который требуется изменить и задайте ему шрифт, размер и стиль.
  3. Нажмите кнопку Сохранить.

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

Меняем цвета¶

  1. В панели Редактора тем выберите в выпадающем списке Редактировать вариант Цвета.
  2. Чтобы изменить цвет определённого элемента, нажмите на цвет рядом с его названием. Открыв окно выбора цветов, вы можете либо выбрать цвет из палитры, или же в соответствующем поле ввести шестизначный код (например, #000000 — чёрный, #FFFFFF — белый) нужного вам цвета. Введя код, нажмите Choose.
  3. Нажмите кнопку Сохранить

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

Меняем цвета фона¶

  1. В панели Редактора тем выберите в выпадающем списке Редактировать вариант Фон.
  2. Чтобы изменить цвет фона определенного элемента, нажмите на цвет рядом с его названием. Открыв окно выбора цветов, вы можете либо выбрать цвет из палитры, или же в соответствующем поле ввести шестизначный код (например, #000000 — чёрный, #FFFFFF — белый) нужного вам цвета. Введя код, нажмите Choose.

Примечание Также для Основной секции вы можете выбрать текстуру в качестве фона. Нажмите на значок рядом с полем Текстура и выберите подходящую из списка текстур. Чтобы загрузить текстуру со своего компьютера, нажмите на значок шестерёнки, а затем нажмите Выбрать. Изображение не должно весить больше 200 кб.

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

Содержание

  • Установка и переезд
  • Администрирование
    • О панели администратора
    • Быстрый старт
    • Внешний вид
      • Отдельные правки
      • Документы
      • Шаблоны email-уведомлений
      • Языки
      • Макеты
      • Логотипы, баннеры, изображения
      • Меню
      • Вкладки
      • Шаблоны
      • Темы
        • Как изменить стиль элементов дизайна витрины
        • Обзор раздела “Темы”
        • Редактор тем
        • Разработка
        • Дизайн
        • Обновление CS-Cart
        • Часто задаваемые вопросы
        • История изменений

        Сейчас

        • Как изменить стиль элементов дизайна витрины
          • Меняем шрифты
          • Меняем цвета
          • Меняем цвета фона

          Можно с помощью CSS изменить стиль только цифровых символов?

          Можно с помощью CSS в тексте изменить стиль только цифровых символов?

          UPD: Уточнение. Нужно поменять задать другой шрифт и размер font-size для цифровых символов.

          • Вопрос задан более трёх лет назад
          • 2051 просмотр

          Комментировать
          Решения вопроса 0
          Ответы на вопрос 3

          webirus

          Тыжверстальщик! Наверстай мне упущенное.
          Ответ написан более трёх лет назад
          Нравится 2 13 комментариев

          evgeniy8086

          Евгений Обыкновенный @evgeniy8086 Автор вопроса
          По-моему, у вас весь текст получается одним шрифтом.

          webirus

          5c4566651888f751666453.png

          Евгений Обыкновенный, у меня нет.

          Ankhena

          Ankhena @Ankhena Куратор тега CSS

          5c4585cf3cb9c602898576.png

          Сергей Горячев, у меня одним шрифтом вся фраза

          webirus

          Ankhena, это разные шрифты, но сказать, почему у тебя не подключился Робото, не могу, но цифры отображаются правильно ZCool’ом.

          5c458a0dab184988118905.png

          Ankhena

          Ankhena @Ankhena Куратор тега CSS
          Сергей Горячев, я вчера даже с Ариалом пробовала

          webirus

          Ankhena, только сейчас увидел, что у меня закомментирован unicode-range, но странно что у меня работает.

          webirus

          Ankhena, ну, значит решение задачи только одно, обернуть на JS все цифры в спан и им прописывать отдельный шрифт. С этим заморачиваться не буду.

          Ankhena

          Ankhena @Ankhena Куратор тега CSS

          закомментирован unicode-range,

          я, конечно, раскомментировала

          Но очень интересно, почему у вас работает, а у меня нет.

          И еще, а если из шрифта удалить все символы, кроме цифр, то применится как надо?

          webirus

          Ankhena, по идее, будет тоже самое, так как unicode-range и делает выборку нужного сегмента шрифта, удаляя ненужное.
          Родилась одна догадка, попробую допилить.

          webirus

          Ankhena

          Ankhena @Ankhena Куратор тега CSS
          Сергей Горячев, тут круть!
          Только при локальном подключении работает?

          webirus

          Ankhena, знаичт с гуглофонтом не работает, ему нужен

          @font-face < font-family: Georgia; src: url('fonts/fontin_sans_regular.eot'); src: url('fonts/fontin_sans_regular.eot?#iefix') format('embedded-opentype'), url('fonts/fontin_sans_regular.woff2') format('woff2'), url('fonts/fontin_sans_regular.woff') format('woff'), url('fonts/fontin_sans_regular.ttf') format('truetype'), url('fonts/fontin_sans_regular.svg#drevodel_regular') format('svg'); font-weight: normal; font-style: normal; >@font-face < font-family: 'drevodel_regular'; src: url('fonts/drevodel_regular.eot'); src: url('fonts/drevodel_regular.eot?#iefix') format('embedded-opentype'), url('fonts/drevodel_regular.woff2') format('woff2'), url('fonts/drevodel_regular.woff') format('woff'), url('fonts/drevodel_regular.ttf') format('truetype'), url('fonts/drevodel_regular.svg#drevodel_regular') format('svg'); font-weight: normal; font-style: normal; unicode-range: U+30-39; >

          webirus

          Ankhena, точнее так)
          С гуглофонтом не работает в хроме, в мозилле норм.

          Попробуйте из кастомного шрифта убрать диапазон с цифрами и тогда, возможно, браузер подтянет маюскульные(те, которые не пляшут по базовой линии) из дефолтного шрифта. Возможно это сработает, но я так не делал и только предполагаю, что когда браузер не сможет найти «unicode-range: U+30-39;» в кастомном шрифте, он подтянет цифры из следующего шрифта в font-face или дефолтный шрифт заданного семейства.
          В таком способе минусом могут быть ограничения по внешнему виду(шрифты должны быть похожи), а плюсом, то что не нужно грузить два шрифта. Если не сработает, то можно попробовать вот так:

          @font-face < font-family: foo; src: url(. ); >@font-face

          — в случае замены цифр из дефолтного шрифта, либо так

          @font-face < font-family: foo; src: url(. ); >@font-face

          — в случае двух кастомных шрифтов.

          P.S. Если попробуете, то отпишитесь о результатах, если не трудно.
          P.P.S. А вообще лучше подберите максимально похожий шрифт с маюскульными цифрами)

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

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