跳到主要内容

Font Glossary

abbr.stand for
SFSan Francisco
enzh
sans-serif无衬线字体
serif衬线字体
Script typeface书写体
fontsubtypesinceadopted by
Helveticasans1957iOS 7, iOS 8
Helvetica Neuesans1983OS X 10.10+
San Franciscosans-serifiOS 9, OS X El Capitan
PingFang SC,TC,HKiOS 9, OS X El Capitan
Monotype LingWai Medium SC,TCmacOS 10.12 Sierra
Songti SC,TCmacOS 10.12 Sierra
San Francisco MonomacOS 10.12 Sierra
KaimacOS 10.13 High Sierra
Kaiti SCmacOS 10.13 High Sierra
Arialsans-serif1982Windows
Nimbus Sans
Lucida GrandeOS X Yosemite
Courier Newserif monoWindows
Segoe UIWindows Visit
UbuntuUbuntu
RobotoAndroid 4+, Chrome OS
.SF NS
font-weightcommon nameuncommon
100Thin,Hairline
200Extralight, Ultralight
300Light
400/normalRegular
500Medium
600Semibold, DemiboldMedium
700/bold
800Extrabold, UltraboldSemibold
900Black, Heavy
950Extra Black,Ultra Black
lighter相对当前
bolder相对当前
# macOS
fc-list : file family

中文字体​

  • 四大主流文字：宋、仿、黑、楷
  • 宋体
    • 可考是明代才出现的字形
    • 日本成为 明体
  • 仿宋
    • 宋朝出现的宋体
  • 抄经体
  • Adobe Song Std L（Adobe 宋体）
  • STSong（华文宋体）
  • SimSun（中易宋体） - Windows
  • 思源
    • by Adobe, Google
    • SIL
    • 思源宋体 - Source Han Serif, Noto Serif CJK
      • 2017 年 4 月 3 日
    • 思源黑体
      • 2014 年 7 月 16 日
    • 思源柔黑
  • 王汉宗自由字形
    • GPL
  • 文泉驿字体
  • 濑户字体
  • 书体坊免费字体
  • 站酷高端黑
  • 站酷快乐体
  • 站酷酷黑体
  • 郑庆科黄油体
  • 可口可乐在乎体
  • OPPO Sans 字体
  • 阿里巴巴普惠体
  • 台北黑体繁体
  • 未来荧黑
  • 俊羽圆体字体
  • 字体圈欣意冠黑体
  • 庞门正道标题体
  • 联盟起艺卢帅正锐黑体
  • 问藏书房
  • 字体传奇特战体
  • 文鼎公众授权字体
  • 方正

中文字号​

字号磅数/pt级数/px主要用途
初号4258.6/59标题
小初号3650标题
一号2638标题
小一号2434标题
二号2128标题
小二号1824标题
三号1622标题、正文
小三号1521标题、正文
四号1420标题、正文
小四号1218标题、正文
五号10.515正文
小五号913注文
六号7.511角注、注文
小六号6.510角注、注文
七号5.58排角注
八号57排角注
  • 字号 (印刷)
  • 中华人民共和国国家标准 GB/T 9704—2012《党政机关公文格式》就有“如无特别说明，公文格式各要素一般用 3 号仿宋体字。

Font Family​

  • -apple-system
    • San Francisco - OS X El Capitan
    • Neue Helvetica - OS X 10.10+
    • Lucida Grande - OS X Yosemite
body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'), local(
      'Ubuntu Light'
    ), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');
}

body {
  font-family: 'system';
}
.font {
  /* San Francisco */
  font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;

  font-family: -apple-system-body;
  font-family: -apple-system-headline;
  font-family: -apple-system-subheadline;
  font-family: -apple-system-caption1;
  font-family: -apple-system-caption2;
  font-family: -apple-system-footnote;
  font-family: -apple-system-short-body;
  font-family: -apple-system-short-headline;
  font-family: -apple-system-short-subheadline;
  font-family: -apple-system-short-caption1;
  font-family: -apple-system-short-footnote;
  font-family: -apple-system-tall-body;
}
@font-face {
  font-family: 'San Francisco';
  font-weight: 400;
  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff');
}

Emoji​

/* Custom emoji font-family to standardize appearance across platforms */
/* https://www.client9.com/css-color-emoji-stack/ */
/* https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/ */
@font-face {
  font-family: 'color-emoji';
  src:
    /* system */
    local('Apple Color Emoji'),
    local('Android Emoji'),
    local('Segoe UI Emoji'),
    local('Segoe UI Symbol'),
    /* extra */ local('Noto Color Emoji'),
    local('EmojiOne Color') local('Twemoji Mozilla');
}

body {
  font-family:
    -apple-system,
    Segoe UI,
    sans-serif,
    color-emoji;
}