Как подключить локальный шрифт .ttf в css?
Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то.
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!
- Вопрос задан более трёх лет назад
- 20880 просмотров
Комментировать
Решения вопроса 1
Оптимизирую PageSpeed & Performance
Конвертер в другие форматы: onlinefontconverter.com
Подключить можно таким кодом (в т.ч. для браузеров-динозавров):
@font-face < font-family: 'Web font'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Новейшие браузеры */ url('webfont.woff') format('woff'), /* Новые браузеры и IE9+ */ url('webfont.ttf') format('truetype'), /* Старые Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Древние Safari, iOS, Android */ font-weight: normal; font-style: normal; >Обычно достаточно:
@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; >Форматы WOFF и WOFF2 — это контейнер с более эффективным, чем ttf сжатием шрифта, как следствие шрифт грузится скорее. Там, где нужно использовать шрифт укажите правило: «font-family: ‘Web font’; »
Справка : Подключение Google Fonts
Использование нестандартных шрифтов — лучший способ индивидуализировать ваш проект, а используя Google Fonts, сделать это можно проще и быстрее.
Шаг за шагом [ ]
- Откройте страницу https://fonts.google.com.
- Выбрав нужный вам шрифт, нажмите на иконку «+», расположенную в правой части заголовка с названием шрифта. При нажатии иконки снизу появится диалоговое окно с заголовком «1 Family Selected». Нажмите на него, и вы сможете увидеть список всех шрифтов, которые вы выбрали.
- В разделе «Your Selection» диалогового окна перейдите в раздел «EMBED» -> «Embed fonts» -> «@IMPORT». Если всё было сделано верно, то вы увидите подобие кода @import url(‘https://fonts.googleapis.com/css?family=название_шрифта’); , где название_шрифта — название выбранного вами шрифта.
- Игнорируя
, скопируйте остальной код и вставьте его в самом началелокального CSS.
- Не забудьте обратить внимание на раздел «Specify in CSS», расположенный в том же диалоговом окне. В нём будет указано, как объявить и использовать шрифт в CSS.
После сброса и обновления кэша, которое занимает пару минут, подключённые шрифты будут готовы к использованию.
Использование нескольких шрифтов [ ]
Если вы решили использовать несколько шрифтов, вы можете повторить вышеуказанные шаги для каждого шрифта или же использовать совет ниже.
Во время просмотра шрифтов, добавляйте их с помощью «+». После того, как нужные вам шрифты выбраны, откройте диалоговое окно и выполните пункт 3 в списке выше. Все выбранные шрифты в списке будут перечислены в ссылке в конце через | , например @import url(‘https://fonts.googleapis.com/css?family=Bungee%7CRoboto’); . По завершению пункта 4 с помощью одного импорта будут доступные сразу несколько шрифтов.
См. также [ ]
- CSS и JS локальные
- Политика настроек
Как подключить шрифт к сайту с помощью CSS и не только
Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами css, js — шрифты незаменимый элемент современного сайта. Поэтому часто у верстальщиков (и не только) возникает вопрос — как подключить шрифт к сайту? И как это можно сделать с помощью css. Давайте разберемся с различными вариантами подключения шрифта к html странице.
Важное уточнение
Не все сайты работают одинаково. Поэтому некоторые методы не будут актуальны для решения вашей задачи. Это статья больше ориентирована на людей, которые сталкивались с HTML и CSS, а также имеют возможность редактировать файлы на своем сайте.
Подключение с помощью CSS через @font-face
В CSS есть такое правило font-face, которое позволяет подключить нужный шрифт к сайту.
Пример подключения шрифта через font-face:
@font-face < font-family: 'MyFont'; src: url(../fonts/MyFont.ttf') format('truetype'); >Давайте разберем синтаксис. Что мы только что сделали. Построчно.
font-family — задали название нашего шрифта. Затем, когда мы захотим, например, задать всем h1 этот шрифт, достаточно в CSS прописать следующее:
Далее src. С помощью этого свойства мы указываем путь к нашему шрифту. В нашем конкретном случае файл MyFont.ttf находится в папке fonts, которая на один уровень выше от нашего css файла, в котором и выполняется данный код. Можно также указать url-адрес, по которому доступен шрифт.
Помимо src есть еще свойство local. Мы можем сказать браузеру, чтобы он искал на локальном компьютере пользователя определенный шрифт. Это может сократить время загрузки страницы, если у пользователя будет на компьютере установлен текущий шрифт.
Кстати, мы можем задать сразу несколько форматов одного и того же шрифта (для лучшей поддержки в различных браузерах):
@font-face < font-family: 'MyFont'; src: url('webfont.eot'); /* Поддерживается в IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Для супер современных браузеров */ url('webfont.woff') format('woff'), /* Для супер современных браузеров */ url('webfont.ttf') format('truetype'), /* Для Сафари, Андроид, iOS и почти всех других */ url('webfont.svg#svgFontName') format('svg'); /* Для iOS */ >Браузер сам выберет нужный ему шрифт. Список доступных форматов: «woff», «woff2», «truetype», «opentype», «embedded-opentype», и «svg».
Если вы хотите подключить несколько разных шрифтов, то можете несколько раз использовать @font-face.
Как подключить шрифт с Google Fonts
Довольно часто нужный шрифт находится в популярной библиотеке Google Fonts.
Подключить шрифт с Google Fonts на сайт можно разными методами.
Например, вы можете сказать понравившийся шрифт и затем добавить его с помощью @font-face, о которой я рассказал вам выше.
Также есть еще варианты.
Находите нужный вам шрифт.
Выбираете нужное начертание (font-weight):
Затем, в правом верхнем углу нажимайте на иконку «View selected families»:
У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).
Вариант с @import ничем не отличается, однако, если вы уберете в коде, который предлагается скопировать, то можете вставлять @import прямо в главный css файл. Вариант с @import позволяет быть более гибким, однако, требует больше внимания.
Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.
Как добавить шрифт в React приложение
В HTML шрифт используется для указания начертания шрифта, размера шрифта, типографики текста. Вы можете добавлять шрифты в свое React приложение разными способами. В этой статьей рассмотрим два быстрых способа добавления шрифтов в React приложение.
Использование link со ссылкой на шрифт
Можно ссылаться на любые шрифты, размещенные в Интернете, используя тег внутри HTML-файла. Давайте рассмотрим пример применения Google шрифтов с помощью тега .
- Перейдите на fonts.google.com
- Выберите понравившийся шрифт и скопируйте его имя
- Вставьте в index.html линк со ссылкой на шрифт. Если ваше приложение создано с помощью create-react-app , вы найдете index.html в папке public .
- Настройте css класс с помощью веб-шрифта в таблице стилей, указав font-family: ‘Font Name’ , например, в index.css :
.font-dancing-script
- Примените селектор в любом React компоненте
// App.jsx import './App.css'; function App() < return (); > export default App;Hello
Использование загруженного шрифта с @font-face
В некоторых ситуациях подключение шрифтов онлайн может быть недоступно или запрещено. Классический пример: пользователи вашего приложения используют интранет и имеют ограниченный доступ к Интернету. В таких случаях шрифты должны быть загружены локально и упакованы в приложение. @font-face — это CSS правило для определения шрифта путем указания шрифта с помощью URL-адреса.
- Создайте папку с именем fonts в src .
- Загрузите необходимые шрифты в папку src\fonts . В этом примере мы загрузили шрифт Dancing Script .
- Затем импортируйте шрифты в файл index.js
// index.js import './fonts/DancingScript/DancingScript-Bold.ttf';
- В index.css добавьте
@font-face < font-family: 'DancingScript'; src: local('DancingScript'), url('./fonts/DancingScript/DancingScript-Bold.ttf') format('truetype'); font-weight: bold; >
- Теперь добавьте в файл index.css имя класса, в котором используется этот font family.
.font-dancing-script
- Используйте это имя класса в своем React компоненте.
// App.jsx import './App.css'; function App() < return (); > export default App;Hello
Как передавать данные между компонентами в ReactJS
год назад · 3 мин. на чтение
В React можно разными способами передавать данные между компонентами. Применимость каждого способа определяется направлением движения данных. Данные могут двигаться от дочернего компонента к родительскому или наоборот. Данные могут двигаться глубоко - от корневого элемента до элемента-потомка. Данными могут обмениваться соседние элементы. В этой статье мы рассмотрим как передавать данные в каждом конкретном случае.
- от родительского компонента к дочернему;
- от дочернего компонента к родительскому;
- между соседними компонентами;
- от компонента к компоненту-потомку (через несколько уровней вниз);
- от компонента к компоненту-предку (через несколько уровней вверх).
- через пропсы;
- используя callback-функцию;
- пробросом пропсов от уровня к уровню (prop drilling);
- при помощи контекста (React Context AP);
- через хранилище (store);
От родительского компонента к дочернему
Наиболее простой и часто встречающийся случай - это случай, когда дочерний компонент принимает данные от родителя через пропсы.
import < useState >from 'react' const Parent = () => < const [value, setValue] = useState('') const handleChange = (event) => < setValue(event.target.value) >return (/> />) > const Child = (< value >) => < return ( Value is: '> ) >От дочернего компонента к родительскому
Если необходимо передать данные от дочернего реакт компонента к родительскому, используются функции обратного вызова (callback-функции).
import < useState >from 'react' const Child = (< onChange >) => < const handleChange = (event) => < onChange(event.target.value) // callback-функция >return ( /> ) > const Parent = () => < const [value, setValue] = useState('') const handleChange = (value) => < setValue(value) >return (Value is: '> />) >Между соседними компонентами
Данные между соседними компонентами, т.е. между компонентами на одном уровне, можно передать через общий предок. Обычно данные от одного Реакт компонента передаются вверх, в компонент-предок, через callback-функцию, а компонент-предок передает их в другой компонент через проп.
import < useState >from 'react' const Parent = () => < const [value, setValue] = useState('') const handleChange = (value) => < setValue(value) >return (/> />) > const Sibling1 = (< onChange >) => < const handleChange = (event) => < onChange(event.target.value) >return ( /> ) > const Sibling2 = (< value>) => < return ( Value is: '> ) >Через несколько уровней вверх/вниз
Если компоненты находится в несколько уровнях друг от друга, то также можно передать проп. Этот проп придется описывать во всех компонентах на всех промежуточных уровнях. Эта ситуация называется prop drilling. Если уровней много, то такой способ покажется не очень удобным. Если нужно передавать данные на несколько уровней вверх, то также придется описывать и вызывать callback-функцию на всех промежуточных уровнях. Однако, в подобных случаях можно использовать Context API (пример которого приведен ниже), или state management библиотеки, такие как Redux, MobX, Recoil и т.д.
import < useState, useContext, createContext >from 'react' // создаем контекст const ValueContext = createContext() // Component1 записывает данные в контекст ValueContext const Component1 = () => < const < setValue >= useContext(ValueContext) const handleChange = (event) => < setValue(event.target.value) >return ( /> ) > // Component2 читает данные из контекста ValueContext const Component2 = () => < const < value >= useContext(ValueContext) return ( Value is: '> ) > // компоненты, которым необходим доступ к контексту, // должны быть обернуты в Provider export default function App() < const [value, setValue] = useState('') return (>> ) >