Specify Typeface and Font Size in Markdown Files and Web Pages by HTML <font>
Tag
Introduction
I ever wrote a blog1 to record how to use color
attribute of HTML <font>
to color text in .md
files and HTML web pages. Actually, in addition to color
, there are two other attributes face
and size
of <font>
element2, which the former is used to set font name, and the latter is to change font size. I would take some notes about them in this post.
Font name settings (face
attribute)
Chinese fonts
There are many Chinese fonts available in .md
files and HTML web pages (see reference3), here are four commonly used of them.
楷体 (Kaiti)
<font face="楷体">阿拉斯加海湾</font>
: 阿拉斯加海湾
<font face="Kaiti">阿拉斯加海湾</font>
: 阿拉斯加海湾
黑体 (SimHei)
<font face="黑体">阿拉斯加海湾</font>
: 阿拉斯加海湾
<font face="SimHei">阿拉斯加海湾</font>
: 阿拉斯加海湾
仿宋 (FongSong)
<font face="仿宋">阿拉斯加海湾</font>
: 阿拉斯加海湾
<font face="FangSong">阿拉斯加海湾</font>
: 阿拉斯加海湾
新宋体 (NSimSun)
<font face="新宋体">阿拉斯加海湾</font>
: 阿拉斯加海湾
<font face="NSimSun">阿拉斯加海湾</font>
: 阿拉斯加海湾
English fonts
The followings are the available English fonts from Ofnoname’s blog4. His blog provides more information about these fonts, including their origins and short histories, as well as some straight usage suggestions.
Times New Roman
<font face="Times New Roman">Gulf of Alaska</font>
: Gulf of Alaska
Arial
<font face="Arial">Gulf of Alaska</font>
: Gulf of Alaska
Arial Black
<font face="Arial Black">Gulf of Alaska</font>
: Gulf of Alaska
Arial Narrow
<font face="Arial Narrow">Gulf of Alaska</font>
: Gulf of Alaska
Verdana
<font face="Verdana">Gulf of Alaska</font>
: Gulf of Alaska
Georgia
<font face="Georgia">Gulf of Alaska</font>
: Gulf of Alaska
Trebuchet MS
<font face="Trebuchet MS">Gulf of Alaska</font>
: Gulf of Alaska
Courier New
<font face="Courier New">Gulf of Alaska</font>
: Gulf of Alaska
Impact
<font face="Impact">Gulf of Alaska</font>
: Gulf of Alaska
Comic Sans MS
<font face="Comic Sans MS">Gulf of Alaska</font>
: Gulf of Alaska
Tahoma
<font face="Tahoma">Gulf of Alaska</font>
: Gulf of Alaska
Courier
<font face="Courier">Gulf of Alaska</font>
: Gulf of Alaska
Lucida Sans Unicode
<font face="Lucida Sans Unicode">Gulf of Alaska</font>
: Gulf of Alaska
Lucida Console
<font face="Lucida Console">Gulf of Alaska</font>
: Gulf of Alaska
Garamond
<font face="Garamond">Gulf of Alaska</font>
: Gulf of Alaska
MS Sans Serif
<font face="MS Sans Serif">Gulf of Alaska</font>
: Gulf of Alaska
MS Serif
<font face="MS Serif">Gulf of Alaska</font>
: Gulf of Alaska
Palatino Linotype
<font face="Palatino Linotype">Gulf of Alaska</font>
: Gulf of Alaska
Symbol
<font face="Symbol">Gulf of Alaska</font>
: Gulf of Alaska
Bookman Old Style
<font face="Bookman Old Style">Gulf of Alaska</font>
: Gulf of Alaska
Font size settings (size
attribute)
The size
attribute is used to change font size, but it should be noted that, its acceptable values only range from 1
to 7
2. Besides, the relative values, related to default value 3
, can be specified for setting size2. However, in my actual use, I found that, relative values in numeric form works well in .md
files but not functional in web pages (shows as follows); it is a solution to put them in ""
to convert to text form.
Font Size = 1
<font size=1>阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size="-2">阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size=-2>阿拉斯加海湾, Gulf of Alaska</font>
: <font size=-2>阿拉斯加海湾, Gulf of Alaska</font>
Font Size = 3 (default value)
<font size=3>阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size="+0">阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size="-0">阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size=+0>阿拉斯加海湾, Gulf of Alaska</font>
: <font size=+0>阿拉斯加海湾, Gulf of Alaska</font>
<font size=-0>阿拉斯加海湾, Gulf of Alaska</font>
: <font size=-0>阿拉斯加海湾, Gulf of Alaska</font>
Font Size = 5
<font size=5>阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size="+2">阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size=+2>阿拉斯加海湾, Gulf of Alaska</font>
: <font size=+2>阿拉斯加海湾, Gulf of Alaska</font>
Font Size = 7
<font size=7>阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size="+4">阿拉斯加海湾, Gulf of Alaska</font>
: 阿拉斯加海湾, Gulf of Alaska
<font size=+4>阿拉斯加海湾, Gulf of Alaska</font>
: <font size=+4>阿拉斯加海湾, Gulf of Alaska</font>