読者です 読者をやめる 読者になる 読者になる

@font-faceが便利

CSS

けっこう昔からある技術なのかもしれないが、@font-faceでローカルにインストールされていないフォントを指定してHTMLを描画することができることを知った。

以下はAthena Unicodeでギリシア語を表示する例。読みやすく表示されるのでかなりテンションがあがる。この機能はWebデザイナーよりもマイナー言語研究者や学生に有効そうだな。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@font-face {
  font-family: "Athena Unicode";
  src: url("fonts/athena_u.TTF");
}

.greek {
  font-family: "Athena Unicode";
}
</style>
</head>
<body>
<p class="greek">
<b>&#931;&#969;&#954;&#961;&#940;&#964;&#951;&#962;</b><br />
&#954;&#945;&#964;&#941;&#946;&#951;&#957; &#967;&#952;&#8050;&#962; &#949;&#7984;&#962; &#928;&#949;&#953;&#961;&#945;&#953;&#8118; &#956;&#949;&#964;&#8048; &#915;&#955;&#945;&#973;&#954;&#969;&#957;&#959;&#962; &#964;&#959;&#8166; &#7944;&#961;&#943;&#963;&#964;&#969;&#957;&#959;&#962; &#960;&#961;&#959;&#963;&#949;&#965;&#958;&#972;&#956;&#949;&#957;&#972;&#962; &#964;&#949; &#964;&#8135; &#952;&#949;&#8183; &#954;&#945;&#8054; &#7941;&#956;&#945; &#964;&#8052;&#957; &#7953;&#959;&#961;&#964;&#8052;&#957; &#946;&#959;&#965;&#955;&#972;&#956;&#949;&#957;&#959;&#962; &#952;&#949;&#940;&#963;&#945;&#963;&#952;&#945;&#953; &#964;&#943;&#957;&#945; &#964;&#961;&#972;&#960;&#959;&#957; &#960;&#959;&#953;&#942;&#963;&#959;&#965;&#963;&#953;&#957; &#7941;&#964;&#949; &#957;&#8166;&#957; &#960;&#961;&#8182;&#964;&#959;&#957; &#7940;&#947;&#959;&#957;&#964;&#949;&#962;. &#954;&#945;&#955;&#8052; &#956;&#8050;&#957; &#959;&#8022;&#957; &#956;&#959;&#953; &#954;&#945;&#8054; &#7969; &#964;&#8182;&#957; &#7952;&#960;&#953;&#967;&#969;&#961;&#943;&#969;&#957; &#960;&#959;&#956;&#960;&#8052; &#7956;&#948;&#959;&#958;&#949;&#957; &#949;&#7990;&#957;&#945;&#953;, &#959;&#8016; &#956;&#941;&#957;&#964;&#959;&#953; &#7975;&#964;&#964;&#959;&#957; &#7952;&#966;&#945;&#943;&#957;&#949;&#964;&#959; &#960;&#961;&#941;&#960;&#949;&#953;&#957; &#7971;&#957; &#959;&#7985; &#920;&#961;&#8119;&#954;&#949;&#962; &#7956;&#960;&#949;&#956;&#960;&#959;&#957;.
</p>
</body>
</html>