4. Supplement
4-E.英語フォント＋α
英語のフォントをいろいろなサイズで指定してみました。ブラウザやOSが変わっても、 互換性はかなり高いです。日本語フォントに比べると種類も豊富で、全体的に洗練されている感じがします。英語フォントいろいろ(Windows標準フォント)
一部フォントでは文字サイズを大きくしていくと、25pxあたりから文字にアンチエイリアスがかかって表示が滑らかになります。 英文フォントの中にはGeorgiaなど美しいフォントもあるので、デザインの一部として取り入れても遜色ありません。フォント指定タグの書き方：
デフォルト (フォント名不明)
This is default in 13px.
This is default in 15px.
This is default in 17px.
This is default in 20px.
This is default in 24px.
This is default in 28px.
This is default in 32px.
Arial
This is Arial in 13px.
This is Arial in 15px.
This is Arial in 17px.
This is Arial in 20px.
This is Arial in 24px.
This is Arial in 28px.
This is Arial in 32px.
Arial Black
This is Arial Black in 13px.
This is Arial Black in 15px.
This is Arial Black in 17px.
This is Arial Black in 20px.
This is Arial Black in 24px.
This is Arial Black in 28px.
This is Arial Black in 32px.
Century
This is Century in 13px.
This is Century in 15px.
This is Century in 17px.
This is Century in 20px.
This is Century in 24px.
This is Century in 28px.
This is Century in 32px.
Century Gothic
This is Century Gothic in 13px.
This is Century Gothic in 15px.
This is Century Gothic in 17px.
This is Century Gothic in 20px.
This is Century Gothic in 24px.
This is Century Gothic in 28px.
This is Century Gothic in 32px.
Comic Sans MS
This is Comic Sans MS in 13px.
This is Comic Sans MS in 15px.
This is Comic Sans MS in 17px.
This is Comic Sans MS in 20px.
This is Comic Sans MS in 24px.
This is Comic Sans MS in 28px.
This is Comic Sans MS in 32px.
Courier New
This is Courier New in 13px.
This is Courier New in 15px.
This is Courier New in 17px.
This is Courier New in 20px.
This is Courier New in 24px.
This is Courier New in 28px.
This is Courier New in 32px.
Georgia
This is Georgia in 13px.
This is Georgia in 15px.
This is Georgia in 17px.
This is Georgia in 20px.
This is Georgia in 24px.
This is Georgia in 28px.
This is Georgia in 32px.
Impact
This is Impact in 13px.
This is Impact in 15px.
This is Impact in 17px.
This is Impact in 20px.
This is Impact in 24px.
This is Impact in 28px.
This is Impact in 32px.
Lucida Console
This is Lucida Console in 13px.
This is Lucida Console in 15px.
This is Lucida Console in 17px.
This is Lucida Console in 20px.
This is Lucida Console in 24px.
This is Lucida Console in 28px.
This is Lucida Console in 32px.
Tahoma
This is Tahoma in 13px.
This is Tahoma in 15px.
This is Tahoma in 17px.
This is Tahoma in 20px.
This is Tahoma in 24px.
This is Tahoma in 28px.
This is Tahoma in 32px.
Times New Roman
This is Times New Roman in 13px.
This is Times New Roman in 15px.
This is Times New Roman in 17px.
This is Times New Roman in 20px.
This is Times New Roman in 24px.
This is Times New Roman in 28px.
This is Times New Roman in 32px.
Verdana
This is Verdana in 13px.
This is Verdana in 15px.
This is Verdana in 17px.
This is Verdana in 20px.
This is Verdana in 24px.
This is Verdana in 28px.
This is Verdana in 32px.
This is default in 13px.
This is default in 15px.
This is default in 17px.
This is default in 20px.
This is default in 24px.
This is default in 28px.
This is default in 32px.
Arial
This is Arial in 13px.
This is Arial in 15px.
This is Arial in 17px.
This is Arial in 20px.
This is Arial in 24px.
This is Arial in 28px.
This is Arial in 32px.
Arial Black
This is Arial Black in 13px.
This is Arial Black in 15px.
This is Arial Black in 17px.
This is Arial Black in 20px.
This is Arial Black in 24px.
This is Arial Black in 28px.
This is Arial Black in 32px.
Century
This is Century in 13px.
This is Century in 15px.
This is Century in 17px.
This is Century in 20px.
This is Century in 24px.
This is Century in 28px.
This is Century in 32px.
Century Gothic
This is Century Gothic in 13px.
This is Century Gothic in 15px.
This is Century Gothic in 17px.
This is Century Gothic in 20px.
This is Century Gothic in 24px.
This is Century Gothic in 28px.
This is Century Gothic in 32px.
Comic Sans MS
This is Comic Sans MS in 13px.
This is Comic Sans MS in 15px.
This is Comic Sans MS in 17px.
This is Comic Sans MS in 20px.
This is Comic Sans MS in 24px.
This is Comic Sans MS in 28px.
This is Comic Sans MS in 32px.
Courier New
This is Courier New in 13px.
This is Courier New in 15px.
This is Courier New in 17px.
This is Courier New in 20px.
This is Courier New in 24px.
This is Courier New in 28px.
This is Courier New in 32px.
Georgia
This is Georgia in 13px.
This is Georgia in 15px.
This is Georgia in 17px.
This is Georgia in 20px.
This is Georgia in 24px.
This is Georgia in 28px.
This is Georgia in 32px.
Impact
This is Impact in 13px.
This is Impact in 15px.
This is Impact in 17px.
This is Impact in 20px.
This is Impact in 24px.
This is Impact in 28px.
This is Impact in 32px.
Lucida Console
This is Lucida Console in 13px.
This is Lucida Console in 15px.
This is Lucida Console in 17px.
This is Lucida Console in 20px.
This is Lucida Console in 24px.
This is Lucida Console in 28px.
This is Lucida Console in 32px.
Tahoma
This is Tahoma in 13px.
This is Tahoma in 15px.
This is Tahoma in 17px.
This is Tahoma in 20px.
This is Tahoma in 24px.
This is Tahoma in 28px.
This is Tahoma in 32px.
Times New Roman
This is Times New Roman in 13px.
This is Times New Roman in 15px.
This is Times New Roman in 17px.
This is Times New Roman in 20px.
This is Times New Roman in 24px.
This is Times New Roman in 28px.
This is Times New Roman in 32px.
Verdana
This is Verdana in 13px.
This is Verdana in 15px.
This is Verdana in 17px.
This is Verdana in 20px.
This is Verdana in 24px.
This is Verdana in 28px.
This is Verdana in 32px.
英語フォントいろいろ(Mac標準)
Helvetica Mac標準 (WindowsでもHelveticaとして表示されます)
This is Helvetica in 13px.
This is Helvetica in 15px.
This is Helvetica in 17px.
This is Helvetica in 20px.
This is Helvetica in 24px.
This is Helvetica in 28px.
This is Helvetica in 32px.
This is Helvetica in 13px.
This is Helvetica in 15px.
This is Helvetica in 17px.
This is Helvetica in 20px.
This is Helvetica in 24px.
This is Helvetica in 28px.
This is Helvetica in 32px.
特殊文字の記述方法
「>」や「<」のような文字は、Web上ではそのまま表示することはできません。そこで、以下のような万能コードを使って表示させます。 これはHTMLに限らずJavaScript/PHP等で「"」といったような文字を文字列として表示させたい場合にも有効です。⇒ 詳しくは文字参照(Wikipedia)へ
おまけ：絵文字フォント(Windows, IEのみ)
非推奨ですが、部分的に使うと便利な絵文字フォントもあります。例えば、<span style="font-family: 'Wingdings'">*</span>sample@sample.com<br> と記述すると、
*sample@sample.com
といった表示ができたりします。(Mac非対応、Firefox, Safari非対応)
ただ、OSやブラウザが限定される表現は望ましくないので、絵文字はいちど画像に変換してから使うことをおすすめします。 Photoshop等を使えば簡単です。
Wingdings (Windows標準絵文字フォント)
Webdings (Windows標準絵文字フォント)
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | - | ^ | \ |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | - | ^ | \ |
| ! | " | # | $ | % | & | ' | ( | ) | = | ~ | | | |
| ! | " | # | $ | % | & | ' | ( | ) | = | ~ | | | |
| a | b | c | d | e | f | g | h | i | j | k | l | m |
| a | b | c | d | e | f | g | h | i | j | k | l | m |
| A | B | C | D | E | F | G | H | I | J | K | L | M |
| A | B | C | D | E | F | G | H | I | J | K | L | M |
| n | o | p | q | r | s | t | u | v | w | x | y | z |
| n | o | p | q | r | s | t | u | v | w | x | y | z |
| N | O | P | Q | R | S | T | U | V | W | X | Y | Z |
| N | O | P | Q | R | S | T | U | V | W | X | Y | Z |
| @ | [ | ; | : | ] | , | . | / | \ | ||||
| @ | [ | ; | : | ] | , | . | / | \ | ||||
| ` | { | + | * | } | < | > | ? | _ | ||||
| ` | { | + | * | } | < | > | ? | _ |
Webdings (Windows標準絵文字フォント)
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | - | ^ | \ |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | - | ^ | \ |
| ! | " | # | $ | % | & | ' | ( | ) | = | ~ | | | |
| ! | " | # | $ | % | & | ' | ( | ) | = | ~ | | | |
| a | b | c | d | e | f | g | h | i | j | k | l | m |
| a | b | c | d | e | f | g | h | i | j | k | l | m |
| A | B | C | D | E | F | G | H | I | J | K | L | M |
| A | B | C | D | E | F | G | H | I | J | K | L | M |
| n | o | p | q | r | s | t | u | v | w | x | y | z |
| n | o | p | q | r | s | t | u | v | w | x | y | z |
| N | O | P | Q | R | S | T | U | V | W | X | Y | Z |
| N | O | P | Q | R | S | T | U | V | W | X | Y | Z |
| @ | [ | ; | : | ] | , | . | / | \ | ||||
| @ | [ | ; | : | ] | , | . | / | \ | ||||
| ` | { | + | * | } | < | > | ? | _ | ||||
| ` | { | + | * | } | < | > | ? | _ |