Как подключить два шрифта через CSS?
Как подключить два шрифта через CSS? Нужно подключить ArialNarrow Bold и AGAalenBold Roman. И еще вопрос где можно найти эти шрифты?
Отслеживать
задан 29 апр 2014 в 7:40
Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.
29 апр 2014 в 7:57
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
@font-face < font-family: ArialNarrow Bold; src: url(ArialNarrowBold.ttf); >@font-face < font-family: AGAalenBold Roman; src: url(AGAalenBoldRoman.ttf); >.class1 < font-family: "ArialNarrow Bold"; >.class2
Отслеживать
ответ дан 29 апр 2014 в 7:55
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
шрифты нужно поискать в интрнете для конвертации можно использовать:
@font-face < font-family: 'шрифт1'; src: url('шрифт1.eot'); src: url('шрифт1.eot?#iefix') format('embedded-opentype'), url('шрифт1.woff') format('woff'), url('шрифт1.ttf') format('truetype'), url('шрифт1.svg#cuprumffuregular') format('svg'); font-weight: normal; font-style: normal; >@font-face
Отслеживать
ответ дан 29 апр 2014 в 7:55
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.
29 апр 2014 в 8:00
Попробуйте другим сервисом
29 апр 2014 в 8:19
@font-face < font-family: "Font_name"; src: url("Fontname.woff2") format("woff2"), url("Fontname.woff") format("woff"); font-weight: 400; font-style: normal; >@font-face
Отслеживать
ответ дан 19 июн 2018 в 17:18
- шрифты
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как подключить несколько шрифтов в html?
Но в css написано нужно вставлять font-family: ‘IBM Plex Sans’, sans-serif; .
То есть, текст становится одним стилем данного шрифта.
Как задавать определённый стиль?
То есть как, прописать для одного тега
шрифт regular 400 , а для другого тега
bold 700 italic , а один
вообще поставить в шрифт Open sea?
- Вопрос задан более года назад
- 622 просмотра
2 комментария
Простой 2 комментария
ну в сss есть селекторы, там можно определить начертание и «жирность» шрифта. Потренируйся на Arial.
то есть как прописать для одного тега шрифт regular 400
А для другого тега bold 700 italic
так и написать
p
Ankhena @Ankhena Куратор тега CSS
но в css написано нужно вставлять font-family: ‘IBM Plex Sans’, sans-serif;
Да, потому что font-family у них один общий.
А различается только жирность и/или начертание.
Если основной шрифт на сайте IBM Plex Sans, то для body прописывайте:
font-family: «IBM Plex Sans», sans-serif;
Затем, для тех блоков, которым нужна жирность отличная от 400 или той, что вы дополнительно указали для body, задаете свой font-weight.
Всё аналогично тому, как вы пишете про размер шрифта.
Решения вопроса 2
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
То есть как, прописать для одного тега шрифт regular 400, а для другого тега bold 700 italic, а один вообще поставить в шрифт Open sea?
Ну ровно так и делать, как вы написали.
p.one < font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; >p.two < font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-style: italic; >p.three
Как отметили выше, основное семейство шрифта лучше задать для всей страницы, в нужных местах менять только жирность и начертание.
Как осуществить подключение нескольких шрифтов в css?
Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.
Почти все из них используются на странице. Вопрос вот в чем, если мне нужно подключить три файла из двенадцати или более, как должна выглядеть запись в @font-face?
@font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); >/*И повторяем этот кусок кода изменяя гарнитуру и имя файла*//*Либо можно использовать такой вариант?*/ @font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); /*И так далее. */ >Как будет правильно?
- Вопрос задан более трёх лет назад
- 70453 просмотра
Комментировать
Решения вопроса 2
Веб-разработчик
@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-normal.eot"); src: local('☺'), url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-normal.woff") format("woff"), url("../fonts/ptserif-normal.ttf") format("truetype"), url("../fonts/ptserif-normal.svg#PT Serif") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bold.eot"); src: local('☺'), url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bold.woff") format("woff"), url("../fonts/ptserif-bold.ttf") format("truetype"), url("../fonts/ptserif-bold.svg#PT Serif") format("svg"); font-weight: bold; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-italic.eot"); src: local('☺'), url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-italic.woff") format("woff"), url("../fonts/ptserif-italic.ttf") format("truetype"), url("../fonts/ptserif-italic.svg#PT Serif") format("svg"); font-weight: normal; font-style: italic; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bolditalic.eot"); src: local('☺'), url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bolditalic.woff") format("woff"), url("../fonts/ptserif-bolditalic.ttf") format("truetype"), url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg"); font-weight: bold; font-style: italic; >В font-weight можно использовать не ключевые слова, а цифры
100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black
При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта
UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1
Подробнее смотрите на caniuse.com
@font-face < font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; >123. Как подключить сторонний шрифт в CSS
Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.
@font-face font-family: 'Open Sans';
src: local('Open Sans'),
url('/font/open_sans.ttf') format('truetype');
>Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p ). Часть кода local(‘Open Sans’) означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.
@font-face font-family: 'Open Sans';
src: url('/font/open_sans.ttf') format('truetype');
>Третий пример более полный и более кроссбраузерный.
@font-face font-family: 'Open Sans';
src: url('open_sans.eot');
src: url('open_sans.ttf') format('truetype'),
url('open_sans.woff') format('woff');
font-weight: normal;
font-style: normal;
>Другие способы подключения шрифтов
Способ первый (например, берем шрифт с сайта Google), код вставляется в :
Способ второй (вставляется в CSS файл):
@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');