首页>建站资源>字体下载
下载

现代字体堆栈

系统字体堆栈CSS按字体分类组织每个现代操作系统

最快的字体可用。没有下载，没有布局变化，没有闪光，只是即时渲染。


系统ui·过渡·旧样式·人文主义·几何人文主义者

古典人道主义者·新粒子

工业·圆形的sans·平板衬线·古董·Did


其他功能 /操作系统支持 /插件和扩展


系统UI

系统UI字体是操作系统接口的原生字体。它们高度清晰，易于阅读，尺寸很小，包含许多字体重量，并且是UI元素的理想选择。

CSS字体堆栈

 font-family : system-ui , sans-serif;

系统UI字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染系统UI字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
旧金山● ● ● ● ● ● ● ● ●
Segoe UI ● ● ● ● ● ● ● ● ●
机器人● ● ● ● ● ● ● ● ●
Ubuntu ● ● ● ● ●
坎塔雷尔● ● ● ● ●
noto sans ● ● ● ● ● ● ● ● ●

笔记

  • System UI不再是字体堆栈，而更多的是CSS值system-ui ，代表默认用户界面字体。它在所有现代操作系统上得到了广泛的支持。
  • 显示的字体是每个现代操作系统中UI的默认字体。

返回顶↑

过渡

过渡字体是在启蒙运动过程中开发的旧样式和现代字体之间的混合。过渡字体最著名的例子之一是《时代新罗马》，该罗马是为伦敦时报开发的。

CSS字体堆栈

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

过渡字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染过渡字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
宪章● ● ●
Bitstream Charter ● ●
Sitka文字● ●
坎布里亚● ●
notoserif¹ ● ●

笔记

  • Charter是Matthew Carter于1987年设计的奇妙而永恒的字体，用于低分辨率300DPI传真机和激光打印机。它具有很大的X-Height帮助可读性，并在当今的屏幕上贴上了精美的启动。
  • Macos的宪章有一个奇怪的非破坏空间（   ）。该错误已报告给苹果。
  • Sitka是Matthew Carter设计的另一个美丽字体，它略微类似于宪章。 Sitka是在Microsoft的高级阅读技术协作中设计的，以优化可读性。
  • Android使用Noto Serif作为其默认serif字体，因此无需在堆栈中指定。

返回顶↑

旧风格

旧样式字体的特征是对角线应力，厚和薄的中风之间的低对比度以及圆形的衬线，并在文艺复兴时期开发。 Garamond是旧式字体最著名的例子之一。

CSS字体堆栈

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

老式字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染旧样式字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
爱荷华州的老式● ● ●
Palatino Linotype ● ●
URW Palladio L ● ●
P052 ● ●
notoserif¹ ● ●

笔记

  • Android使用Noto Serif作为其默认serif字体，因此无需在堆栈中指定。

返回顶↑

人文主义者

人文主义字体的特征是它们的有机，书法形式和厚和薄的中风之间的对比度低。这些字体的灵感来自文艺复兴时期的笔迹，通常被认为比其他sans-serif字体更容易清晰，更易于阅读。

CSS字体堆栈

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

人文主义字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染人文主义字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
Seravek ● ● ● ● ●
吉尔·桑斯·诺瓦（Gill Sans Nova） ● ● ● ●
Ubuntu ● ● ● ● ●
钙纤维● ● ●
Dejavu Sans ● ● ●
来源Sans Pro ● ● ●

笔记

  • Gill Sans Nova可作为补充可下载字体提供。
  • Source SANS Pro在Android下使用名称源源Pro，因此该字体仅针对Android设备。

返回顶↑

几何人文主义者

几何人文主义字体的特征是它们的干净，几何形式和均匀的中风宽度。这些字体通常被认为是现代的，外观时尚，通常用于标题和其他显示目的。 Futura是此分类的著名例子。

CSS字体堆栈

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

几何人文主义字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染几何人文主义字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
Avenir ● ● ● ● ●
蒙特塞拉特● ● ● ● ● ● ● ● ●
科尔贝尔● ● ●
URW哥特式● ●
来源Sans Pro ● ● ●

笔记

  • Avenir是MacOS的接下来选择的Avenir，因为在Avenir接下来的200重量上，重量300在网络上更加清晰。如果您正在寻找超光线或超黑色，请随时将Avenir交换为Avenir。
  • Source SANS Pro在Android下使用名称源源Pro，因此该字体仅针对Android设备。

返回顶↑

古典人文主义者

经典的人文主义字体的特征是中风在到达中风终端而不结束衬线时如何巧妙地扩大。这些字体的灵感来自古典罗马首都和文艺复兴时期的墓碑上的雕刻。

CSS字体堆栈

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

古典人文主义字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染古典人文主义字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
Optima ● ● ●
坎迪拉● ● ●
noto sans ● ● ● ● ● ● ● ● ●
来源Sans Pro ● ● ●

笔记

  • Source SANS Pro在Android下使用名称源源Pro，因此该字体仅针对Android设备。

返回顶↑

新绿色

新格纹字体是一种sans-serif风格，在19世纪末和20世纪初开发，其特征是其干净，几何形式和均匀的中风宽度。新粒子类字体最著名的例子之一是Helvetica。

CSS字体堆栈

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

Neo-Grotesque字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染Neo-Grotesque字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
间● ● ● ● ● ● ● ● ●
机器人● ● ● ● ● ● ● ● ●
Helvetica Neue ● ● ● ● ● ● ●
Arial Nova ● ● ●
nimbus sans ● ● ●
Arial ● ● ●

笔记

  • ARIAL NOVA可作为补充下载字体可用。
  • Roboto用于Linux（MX Linux，Elementaryos等）和手动安装。它不会在Android上渲染Roboto，而是Android的sans-serif。

返回顶↑

单拼音平板衬线

单层平板衬线字体的特征是其固定宽度字母，其宽度与其形状以及简单的几何形式，其宽度相同。用于模拟打字机输出以进行报告，表格工作和技术文档。

CSS字体堆栈

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

单层平板衬线字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染单层平板衬线字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
nimbus mono ps ● ●
快递员新● ●
可爱的单声道●

笔记

  • 首先指定nimbus mono ps，因为许多Linux发行版为快递创建名称别名，而不是总是代表平板衬线
  • Cutive Mono不需要在堆栈中代表，因为Android为快递员创建了名字别名。
  • 不幸的是，可爱的单声道只有一个重量

返回顶↑

单义代码

Monospace代码字体专门用于编程和其他技术应用程序。这些字体的特征是它们的单一设计，这意味着所有字母和角色的宽度和清晰，清晰清晰的形式具有相同的宽度。

CSS字体堆栈

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

单义代码字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染单义代码字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
SF单声道● ● ● ● ● ●
卡斯卡迪亚代码● ● ● ● ● ●
源代码Pro ● ● ● ● ● ● ●
门洛● ●
康斯拉斯● ●
Dejavu Sans Mono ● ●
机器人无单声道●

笔记

  • SF Mono仅通过MACOS 10.15+上的ui-monospace和使用Safari时可用
  • droid sans mono for android不需要在堆栈中指定，因为monospace是一个名字的别名

返回顶↑

工业的

工业字体起源于19世纪后期，在此期间受到技术和行业进步的严重影响。工业字体的特征是它们的大胆，无关的字母形式，简单明了的外观以及直线和几何形状的使用。

CSS字体堆栈

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

工业字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染工业字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
Bahnschrift ● ● ● ● ● ● ● ● ●
Din替代 ●
富兰克林哥特式媒介 ●
nimbus sans narrow ● ●
机器人凝结● ● ● ● ● ● ● ● ●

笔记

  • 由于此堆栈跨操作系统的权重限制，因此最好用作中/粗体显示字体
  • Bahnschrift是添加到Windows中的第一个变量字体之一。
  • Roboto Condemed使用Android下方的sans-serif符合的名称，因此该字体仅针对Android设备。

返回顶↑

圆形的sans

圆形字体的特征是圆形的弯曲字母形式，并具有更柔和，更友好的外观。圆形的边缘使字体具有更具有机和嬉戏的感觉，使其适合于非正式或儿童友好设计。自1950年代以来，圆形的Sans-Serif风格一直很受欢迎，并且它继续被广泛用于广告，品牌和其他形式的图形设计。

CSS字体堆栈

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

圆形的无字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染圆形的无字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
SF Pro Found ● ● ● ● ● ● ● ● ●
Hiragino Maru Gothic ●
流沙● ● ●
comfortaa ● ● ●
曼贾里● ● ●
Arial圆形MT ●
Arial Founded Mt Bold ●
钙纤维● ● ●
来源Sans Pro ● ● ●

笔记

  • SF Pro Founded仅通过MACOS 10.15+和iOS 13.3+的ui-rounded提供
  • Hiragino Maru Gothic从技术上讲是日本字体，但对所有拉丁字符都有支持。 MAC字体不包括粗体，因此将在屏幕上显示人造大胆。
  • Windows需要Arial圆形MT，而iOS，Mac和旧的Windows安装需要Arial圆形MT BOLD
  • Source SANS Pro在Android下使用名称源源Pro，因此该字体仅针对Android设备。这不是一个圆形字体，但这里比Roboto好。

返回顶↑

平板衬线

平板衬线字体的特征是每个字母形式的末端存在厚，块状的衬线。这些衬线通常是不包装的，这意味着它们没有任何弯曲或锥形过渡到字母的主要笔触。

CSS字体堆栈

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

平板衬线字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染平板衬线字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
罗克韦尔● ●
罗克韦尔·诺瓦（Rockwell Nova） ● ● ● ●
机器人平板● ● ● ●
Dejavu Serif ● ●
Sitka Small ● ●
Noto Serif ● ●

笔记

  • Windows办公室包括Rockwell
  • Rockwell Nova可作为补充下载字体使用。
  • Android使用Noto Serif作为其默认serif字体，因此无需在堆栈中指定。

返回顶↑

古董

古董字体（也称为埃及人）是19世纪流行的衬线字体的子集。它们的特征是它们的块状衬线和均匀均匀的卒中重量。

CSS字体堆栈

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

古董字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染古董字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
超级克莱登● ● ● ●
Bookman旧风格● ●
URW Bookman ● ●
佐治亚州职业● ● ● ● ●
乔治亚州● ●
notoserif¹ ● ●

笔记

  • 佐治亚州Pro可作为补充下载字体使用。
  • Android使用Noto Serif作为Georgia的别名，因此无需在堆栈中指定。

返回顶↑

做了

didone字体（也称为现代字体）的特征是厚和薄的笔触，垂直应力和发际线衬线之间的高对比度，没有括号。 Didone风格在18世纪后期出现，并在19世纪越来越受欢迎。

CSS字体堆栈

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

DIDONE FONT堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染DIDONE字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
DIDOT ● ●
Bodoni Mt ● ● ●
Noto Serif显示● ● ● ● ● ● ● ● ●
URW Palladio L ● ●
P052 ● ●
Sylfaen ●
notoserif¹ ● ●

笔记

  • Android使用Noto Serif作为其默认serif字体，因此无需在堆栈中指定。
  • Sylfaen不包含大胆，因此人造大胆将显示在屏幕上。

返回顶↑

手写

手写字体旨在模仿笔迹的外观。尽管有各种各样的手写样式，但这种字体堆栈倾向于采用更非正式和日常的手写方式。

CSS字体堆栈

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

手写字体堆栈

在浏览器中查看（文章视图 /字符）

？跨操作系统的预览渲染手写字体渲染
✅字体重量和笔记
字体重量100 200 300 400 500 600 700 800 900
Segoe印刷● ●
布拉德利手 ●
奇兰卡●
TSCU_COMIC ●
即将推出●

笔记

  • 即将推出的速度在Android下使用随意，因此该字体仅针对Android设备。

返回顶↑

其他功能

表情符号支持

想要在您的页面上添加本地表情符号？在字体堆栈的末尾附加这些字体： 

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji'

抗氧化

通过使用这些CSS属性来呈现您的文本： 

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

操作系统支持

  • Windows 7或更新
  • Android 10或更新（非常有限的具有8个字体）
  • iOS 9.3或更新
  • MacOS 10.9（小牛）或更新
  • Linux（采样12个流行发行版）

返回顶↑

插件和扩展

  • Borisanthony的Tailwind CSS的现代字体堆栈
  • Littlebigthing的WordPress现代字体堆栈
  • 现代字体堆栈由Webstudio在本地支持

返回顶↑

展开
附加信息
相关应用
为您推荐
相关资讯 全部