使っているエディタ「Atom」はGitHubがChromeブラウザを改造して作ったものだから、ド素人が直感的に、Googleのフォントが使えるんじゃないかと思って、フォントをCSSを用いて変更してみた。
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Henny+Penny'
rel='stylesheet' type='text/css'>
<style type="text/css">
.samplefont {
font-size: 24px;
font-family: 'Henny Penny', cursive;
}
</style>
<span class="samplefont">Coffee-Man</span>
赤字のところの説明から。
linkのhrefって何だ？ って思う。
link要素のhref属性を持っている、と言うらしい。
リンクしている先のURLを示していると訳すと語弊があるのか。
rel(リンクの関係)で文書の表現方法を別途定義してやると指定。
その形式はCSSテキストですよって？
style要素を記述して文書単位にスタイルシートを設定する。
その時の約束text/cssをブラウザなどに知らせるため記述。
フォントサイズ２４ｐｘ。
フォント族？は「Henny Penny」
この時、「」内にスペース（空白）があるけど、linkで指定したURLには「Henny＋Penny」となっている。
憶測だけど、アドレスに空白は許されないための対策だと思う。
最後、<span>じゃなくて<p>でも<div>でもいいはず。
このへんは、後々、勉強したい。
クラスの設定の時、「.samplefont」のように、頭にドットが付いているけど、今までの経験上では、「親」、「おおもと」っていう意味だったと解釈している。
パッケージ > MarkdownPreview > TogglePreview
で、HTMLのプレビューが見れる。
でも、指定したGoogleのフォントは使えていない模様。
仕方がないので、保存したローカルなHTMLファイルをChromiumブラウザに移動させて、表示させてみた。
一風、変わったフォントで表示された。
