3,238 views
この記事は最終更新から 1815日 が経過しています。
連載中のオリジナルフォント作成シリーズの第６弾
(68) 【オリジナルWEBフォント作り#1】fontforgeを使ってみる。
(69) 【オリジナルWEBフォント作り#2】Illustratorから文字データをインポート
(70) 【オリジナルWEBフォント作り#3】fontforgeでフォント作成時に最初にやること
(71) 【オリジナルWEBフォント作り#4】どれぐらいの大きさで書くか
(72) 【オリジナルWEBフォント作り#5】 一先ず半角英数字を作ったけど…
上記の #1 ～ #5 で学んで分かったことは…
fontforge で文字コードに対応するベクタ画像を登録してフォントを作っているということ。
ということは…
自由に描いた絵を既存の文字と置き換えられるじゃないか！
と思った。
今思えばそんなフォントも世の中には出回っているし、知っている人にとっては当然のことなのだろう。
自分は今日になってはじめて気づいた。
で…
結論から言うと、こんなことをしてみた。
これを描いているソースコード部分はこちら。
style.css
今回は fontforge で My2ndFont.ttf なるフォントを自作した。
このフォントは「リ」の文字コードのところにリターンキーの画像を登録してある。
@charset "utf-8";
@font-face {
font-family: "特殊文字";
src: url("My2ndFont.ttf") format("truetype");
}
.sp {
font-family: "特殊文字";
}
index.html
HTML文中で class=”sp” で挟んだ中にある「リ」がリターンキー画像に置き換わる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css" /> </head> <body> <p> $ pwd <span class="sp">リ</sp> </p> <p> $ mkdir -p ./aaa/bbb <span class="sp">リ</sp> </p> </body> </html>
作成手順は (68) 【オリジナルWEBフォント作り#1】fontforgeを使ってみる。 のまんまで画像が違うだけなので特に記さない。
ただ下記の 1点だけ備忘録しておきたい。
1) 文字一覧で任意の文字までジャンプする
1. 「表示」－「移動」メニューを選択する。
2. 「リ」までジャンプしたいので「リ」と入力する。
※この窓内では日本語変換ができないので、他所でコピーした「リ」を貼り付ける。
すると…
「リ」まで飛んでこれた。
所感
・オリジナルの特殊文字を整備したら面白いかも！
・特殊文字だけを持つフォントファイルなのでサイズも小さくできる。
・少しずつ整備してみようと思う。
全６回連載
(68) 【オリジナルWEBフォント作り#1】fontforgeを使ってみる。
(69) 【オリジナルWEBフォント作り#2】Illustratorから文字データをインポート
(70) 【オリジナルWEBフォント作り#3】fontforgeでフォント作成時に最初にやること
(71) 【オリジナルWEBフォント作り#4】どれぐらいの大きさで書くか
(72) 【オリジナルWEBフォント作り#5】一先ず半角英数字を作ったけど…
(73) 【オリジナルWEBフォント作り#6】 独自の特殊文字を作ってみる。