欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > CSS >内容正文

CSS

CSS现代字体栈

发布时间:2023/12/14 CSS 39 豆豆
生活随笔 收集整理的这篇文章主要介绍了 CSS现代字体栈 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

CSS字体栈是一系列的字体,它包含了能在不同操作系统和平台上战士的字体,以尽可能的使排版保持一致性。浏览器会在font-family规定的所有字体中从前往后一次查找,如果找不到当前字体就查找下一个字体。

创建字体栈的原则是使用多个操作系统或者终端所共有的或者交叉范围大的一系列字体,需要大量备用字体。

1 /* 基于Times New Roman的字体风格*/ 2 font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 3 4 /* 基于现代Georgia的字体风格*/ 5 font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 6 7 /*基于Garamond的更传统的字体风格*/ 8 font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 9 10 /*基于Helvetica/Arial的字体风格*/ 11 font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 12 13 /*基于Verdana字体风格*/ 14 font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 15 16 /*基于Trebuchet字体风格*/ 17 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 18 19 /*更有深度的"Impact" 字体风格*/ 20 font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 21 22 /*monospace 字体风格*/ 23 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

 

总结

以上是生活随笔为你收集整理的CSS现代字体栈的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。