やってみること
厨二っぽいフォントを使って何か作りたいと思ったので稲塚春さんのMagicRingというフォントを使ってサイトを作る!
今回はとりあえずダウンロードしてきたフォントをCSSで指定できるようにします!
内容
準備
ここから稲塚春さんのMagicRingを頂きました。
これを適当な場所に解凍しておきます。(作るhtmlと一緒のディレクトリのほうが指定が楽!)
追加してみる
index.html
<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="utf-8">
<title>font_test</title>
<style media="screen">
@font-face {
font-family: 'magicring'; <!--使用する名前を決める-->
src: url('./MagicRing.ttf');<!--fontファイルのあるところを指定-->
}
h1{
font-family: "magicring";
}
h1:hover{
color:red;
}
</style>
</head>
<body>
<h1>hogehoge</h1>
</body>
</html>
こんなかんじで出来ました!
遊んでみた
厨二心をそそられたのでこんな装飾をつけてみました。
厨二ページ
以上です。