Specify Typeface and Font Size in Markdown Files and Web Pages by HTML <font> Tag

Apr. 21, 2024

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 72. 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>


References