@qo_0p

Как подключить нестандартные шрифты, чтобы они отрисовывались в canvas?

Друзья, решил поделиться опытом о том, как правильно подключить нестандартные шрифты, вывести их на canvas и не сойти с ума.
1) Итак, если у вас style.css лежит в корне рядом с index.html, а шрифты рядом в папочке fonts, то подключаем так:
@font-face {
    font-family: "Custom Font"; // обязательно двойные кавычки!
    src: url('fonts/Custom Font Bold.otf');
    font-weight: 700;
    font-style: normal;
}

2) Если style.css лежит в своей папочке, а шрифты в своей, то пишем так:
@font-face {
    font-family: "Custom Font"; // обязательно двойные кавычки!
    src: url('../fonts/Custom Font Bold.otf'); // добавляем " ../ "
    font-weight: 700;
    font-style: normal;
}


После этого у вас должны подключиться шрифты и во вне канваса вы сможете ими пользоваться. Но в канвасе их не будет. Что бы они появились в канвасе, вы должны будете сделать следующее:
1) добавить в index.html дивы по количеству шрифтов:
<!doctype html>
<html lang="en">
<head>
	<title>Exemple</title>
    <link href="style.css" rel="stylesheet" media="all">
	<script src="script.js"></script>
</head>
<body>
	<canvas id = "canvas"></canvas>
	<div id="d1">.</div>
	<div id="d2">.</div>
	<div id="d3">.</div>
</body>
</html>

2) В style.css пишем следующее:
#d1 {
    font: 700 1px Custom Font;  // без кавычек
    position: absolute;
    color: #fff; 
}

И так для каждого шрифта. #d2 - второй шрифт, #d3 - третий... Ну в общем вы поняли.
Ко второму и последующим шрифта-дивам в стили добавьте { top: -99; }
После этого шрифты должны рисоваться в канвасе.
  • Вопрос задан
  • 2309 просмотров
Решения вопроса 2
@qo_0p Автор вопроса
Собственно вопрос и есть решение, поэтому отмечу этот пост как решение)
Ответ написан
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
@font-face {
font-family: "Custom Font"; // обязательно двойные кавычки!
src: url('../fonts/Custom Font Bold.otf'); // добавляем " ../ "
font-weight: 700;
font-style: normal;
}

Не самое кроссбраузерное решение подключения шрифтов.
Я бы дополнил правильным подключением статейку.
@font-face{
font-family: "neosanspro_bold";
src:url(../fonts/neosanspro_bold.eot);
src:url(../fonts/neosanspro_bold.eot?#iefix) format('embedded-opentype'),
url(../fonts/neosanspro_bold.woff2) format('woff2'),
url(../fonts/neosanspro_bold.woff) format('woff'),
url(../fonts/neosanspro_bold.ttf) format('truetype'),
url(../fonts/neosanspro_bold.svg#neosanspro_bold) format('svg');
font-weight:400;
font-style:normal
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы