字体／フォント

Since: 23rd/May/2002; Last Modified: 24th/Dec./2006

HTML 文書の文字の種類を変えてみましょう。本稿でも、前節の HTML 文書 genji01_kiritsubo.html をサンプルにして説明します。

genji01_kiritsubo.html のソースは次のようになっています。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 第一帖 桐壺 第一段</title>
</head>

<body>

<h1>源氏物語</h1>

<h2>第一帖 桐壺</h2>

<h3>第一段</h3>

<div class="section">
<p>いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき
際にはあらぬが、すぐれて時めきたまふありけり。</p>

<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>

<p>上達部、上人なども、あいなく目を側めつつ、「いとまばゆき人の御おぼえなり。唐
土にも、かかる事の起こりにこそ、世も乱れ、悪しかりけれ」と、やうやう天の下にもあ
ぢきなう、人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いと
はしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ
。</p>

<p>父の大納言は亡くなりて、母北の方なむいにしへの人のよしあるにて、親うち具し、
さしあたりて世のおぼえはなやかなる御方がたにもいたう劣らず、なにごとの儀式をもも
てなしたまひけれど、とりたててはかばかしき後見しなければ、事ある時は、なほ拠り所
なく心細げなり。</p>
</div> <!-- END section -->

<address>
Copyright (C) 2006 SUGAI, Manabu. Some rights reserved.
</address>

</body>
</html>

外部スタイルシート common.css は次のようになっています：

@charset "utf-8";

html { background: url(./rindou5.gif) navy;
    color: #ccf }
div.section { background : #ccf;
    color: navy }
p:first-child:first-letter { color: red }

また、次の画像ファイルを保存して利用しています：

図： rindou5.gif

以上の三つのファイルを作成していない方は、三つのファイルを同じディレクトリに作成／保存してください。

genji01_kiritsubo.html をブラウザで開いて表示を確認してください。

この HTML 文書にフォント関連の指定をします。

font-style... フォントのイタリックとノーマル
font-variant... フォントの大文字と小文字
font-weight... フォントの太さ
font-size... フォントの大きさ
line-height... 行の高さ
font-family... フォントの種類
まとめ