Друзья, решил поделиться опытом о том, как правильно подключить нестандартные шрифты, вывести их на 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; }
После этого шрифты должны рисоваться в канвасе.
Простой
Простой