Css шрифт не изменяется

Почему не меняется шрифт в css

Собственно, можете указать, в чём ошибка. По какой причине не работает? Браузер — Google Chrome. Пытаюсь вставить на JSFiddle, но ничего не работает.
Как поступить?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка шрифты или задайте свой вопрос.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Способы задания шрифтов в CSS

Шрифт – это важная составляющая веб-дизайна, придающая сайту узнаваемость и выразительность.

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

Как задать шрифт в CSS?

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

Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family .

Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif ).

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

Список шрифтов может выглядеть следующим образом:

Основные свойства шрифтов в CSS

В CSS при описании шрифта используют следующие характеристики:

Стиль

Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.

Атрибут font style может принимать такие значения как:

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

Вариант шрифта

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

Свойство font variant может иметь одно из двух возможных значений:

Вес шрифта

В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight . Некоторыми браузерами поддерживаются числовые значения в описании веса.

Каждый шрифт может принимать следующие значения:

• normal (обычный);
• lighter (светлее);
• bold (жирный);
• bolder (ещё более жирный);
• 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).

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

Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.

Например, задание шрифта размером 20 пикселей выглядит таким образом:

Также, размер шрифта можно задать с помощью процентов от его базового размера.

Например, шрифт с параметрами:

будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.

Цвет шрифта

Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:

Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB .

Например, белый текст на чёрном фоне будет иметь такие значения:

Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.

Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно « придумать » значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000 .

Смешивая цвета, можно получать дополнительные оттенки: совокупность красного и синего цветов, как известно, дадут красно-фиолетовый #ff00ff .

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

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

Почему не меняется шрифт?

Посмотрел пару уроков о том, как добавить шрифт не через google fonts, но столкнулся с проблемой: шрифты не подключаются.
Вот код:

Стили подключены правильно. В основной css добавляю шрифты так:

Простой 2 комментария

Mrako_bes, значит что-то не так делаешь.
Я протестировал скачав этот шрифт с ofont. Все работает у меня на windows.

Источник

Не изменяется размер шрифта через CSS

Всем привет!
Я тут новичок и совсем начинающий пользователь веб-разработки.

Вопрос, собственно вот в чём:

При указании в подключенном к html-документу файле CSS для тега размера шрифта:

Он не работает. Шрифт не изменяется по своему размеру. Но если в «голове» уже самого html-документа поставить:

 html lang=en> head> title>XXX/title> meta charset="UTF-8"> style> a /style> /head>

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

Подскажите, как через CSS-файл поменять размеры шрифта? Испробованы уже все размерности (пиксели, пункты, относительные размерности и т.д.), но толку никакого.

Почему размер шрифта не изменяется?
Почему не меняется размер шрифта, указанный в процентах? Также подключил javascript вот этот.

Изменяется размер шрифта в разных браузерах
Добрый день! Подскажите, почему в Хроме шрифт нормально отображается, а в Мозиле и Эксплорере.

Не изменяется размер шрифта, его цвет
Не изменяется размер шрифта, его цвет, меняю значения font, убрала жирность, но все равно изменений.

Как поменять размер шрифта в css?
Здравствуйте никак не могу поменять размер шрифта в css,кто подскажет как именно поменять? Нашел в.

Источник

Почему мой шрифт CSS не меняется?

Я также попробовал нижеследующее, потому что вышеприведенное не работает:

Пожалуйста, дайте мне знать, почему шрифт не меняется? Если я использую h1:first-child, шрифт применяется ко всем элементам h1.

4 ответа

Видите, h1 находится внутри div id кто. Теперь, если вы установите размер шрифта #who div, тогда h1 должен иметь размер шрифта, но в приложении уже будет определен некоторый размер шрифта h1; поэтому он переопределит размер шрифта #who div.

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

Теперь, если вы хотите нацелиться на первого потомка h1 из #who div, используйте следующую css

Браузер применяет к странице два набора CSS: стили пользовательского агента (браузер «по умолчанию») и стили автора (ваши).

Стили агента пользователя устанавливают такие параметры, как размеры шрифтов заголовков. Они нацелены на непосредственно и установить размер шрифта, обычно около 2em ,

Ваши стили нацелены на родительский элемент #who , Некоторые свойства, такие как свойства шрифта, наследуют DOM до , но объявления, которые нацелены на напрямую переопределит эти унаследованные значения. Стили User Agent ориентированы на делаем это.

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

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

Согласно обновленному вопросу: применение ко всем h1 также связано с этим, поскольку вы не ссылаетесь на h1 внутри идентификатора «кто», он выбирает все из них. Потому что каждый h1 является первым потомком другого элемента

Источник

Изменения стиля шрифта CSS не работают в Chrome

Может кто-то уточнить, почему ниже настройки стиля шрифта не работают в хроме, но работают в IE и FireFox.

У моего веб-сайта такая же проблема, он не подбирает настройки шрифта CSS (где упоминается normal режим), поэтому я тестировал тестовую среду CSS из W3Schools, и поведение такое же.

Фрагмент CSS:

• Работает только в IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
• Работа во всех браузерах: font-family: Arial, Helvetica, sans-serif;

Попробуйте в Chrome и IE увидеть разницу.

CSS font-family
 
This is a paragraph, shown in Arial Without Normal.
 
This is a paragraph, shown in Arial With Normal

Ниже приведены вопросы:

• Не могли бы вы объяснить, почему разница между этими двумя браузерами?
• Как обеспечить, чтобы стили CSS были выбраны Chrome и IE/FireFox (Должен ли я удалять normal из всех моих файлов CSS или есть ли лучший способ сделать это)?

Примечание. Я начинаю разработку веб-страниц, извиняюсь, если вопрос очень прост.

Возможно недопустимое объявление font-family

Если вы откроете свой инспектор браузера ( Ctrl + Shift + i в Chrome), вы увидите, что правило CSS

В соответствии с спецификациями CSS неверное правило игнорируется, и все, что было бы применено (назад к каскаду), применяется вместо или более точно, а не отменено.
В этом случае результат «Times New Roman» – как показано в “Вычисленных стилях”.

Чтобы установить font-style ( -variant , -weight , -stretch или line-height (в зависимости от того, что вы пытались установить в normal )), мы можем либо использовать именно это, либо использовать стенографию font .

Свойство CSS шрифта является либо сокращенным свойством для установки font-style font-variant , font-variant , font-weight , font-size , line-height font-family …

Что касается разницы между IE (и FF) и Chrome

Chrome признает в утверждении с разделителями-запятыми, что sans-serif normal не является font-family , тогда как IE не делает этого.
Если вы упростите правило:

и просмотрите результат в IE, вы увидите, что

находится в «Times New Roman» поскольку, хотя IE принимает декларацию, он не может ничего с ней сделать.

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

Для предотвращения путаницы с ключевыми словами с одинаковыми именами должны быть указаны имена семейств шрифтов, которые совпадают с ключевыми словами (” inherit , ” serif , ” sans-serif , ” monospace , ” fantasy и ” cursive ).

Поэтому рекомендуется, чтобы семейство шрифтов, называемое стандартом sans-serif normal обозначалось как «sans-serif normal» .
И если семейство шрифтов использует то же имя, что и ключевое слово, оно должно быть процитировано.

• И Chrome, и IE будут принимать Comic Sans MS или Times New Roman и т.д. С кавычками или без них и применять их правильно.
• Chrome отклоняет некорректное использование ключевого слова sans-serif где он находит его в сочетании с normal , но будет принимать оба значения, если они указаны, хотя он не сможет применить этот шрифт, если он не сможет найти его с таким именем.
• IE принимает sans-serif normal как возможно некорректное имя семейства шрифтов, и это, возможно, правильно, поскольку ключевое слово является лишь частью предполагаемого фамилии, а не всего.
• Хром, возможно, неправильно, отвергает то, что он предполагает, является неверным утверждением.

Источник