字体设计 css_设计好CSS字体堆栈的三个步骤

字体设计 css

步骤1 (Step One)

Choose the font that you wish to be your first, ideal choice. This can be any font at all, but for practical purposes it should be a font on your system. I’m going to choose Segoe UI Light, which is installed with Windows 7 and Vista.

选择您希望成为首选字体的字体。 可以是任何字体，但出于实用目的，它应该是系统上的字体。 我将选择随Windows 7和Vista安装的Segoe UI Light 。

第二步 (Step Two)

Determine the generic font-family to be the last, catch-all choice: look at the font you have just chosen and determine whether it is a serif, sans-serif, cursive, monospace or fantasy font.

确定通用字体家族是最后一个万能的选择：查看您刚选择的字体，并确定它是serif ， sans-serif ， cursive字体， monospace字体还是fantasy字体。

Font Type	Description
serif	Serif fonts are the oldest printed typefaces, with forms originating from the time of the Roman Empire. Serifs are the small structural details placed at the terminating points in the strokes of each letter. Serif fonts are traditionally used in commercial publishing: most books, newspapers and magazines use a serif typeface for their body text. If you do not specify a font for use in your web page, a serif font, such as Times or Times New Roman, is used by most browsers by default. You may hear serif fonts referred to as slab serif, Egyptian, or Roman fonts.
	Sans-serif fonts are fonts without serif structures, but which still use proportional spacing (which distinguishes them from monospaced fonts). Traditionally used for headings, sans-serif fonts are increasingly being used for body copy. Classic sans-serif fonts include Helvetica, Futura (Stanley Kubrick's favourite font for titling), and Gill Sans. You may also hear sans-serif fonts referred to as Gothic, Doric, humanist or linear fonts.
Monospace	Monospace fonts are those in which each letter uses the same amount of horizontal space. (In other words, a monospaced A character will have the same amount of horizontal space reserved for it as an I.) This gives monospace typefaces an appearance associated with computers, electronics, and dot-matrix printers. Classic monospace fonts include Courier and Andale Mono; monospace fonts may also be referred to as fixed pitch or non-proportional fonts. In an HTML document, content wrapped in a <code> or <kbd> tag will be styled with your browser’s default monospace font.
	While they contain legible characters, fantasy fonts are primarily intended to be used for decoration. The default fantasy font for the Mac, Papyrus, is a good example of this, as a classic example of the lazy typographer’s go-to font for imparting an “exotic” feel (used recently, and to some derision, as the font for Na'vi language subtitles in James Cameron’s Avatar).
cursive	Cursive fonts are intended to resemble handwriting, and as such should usually be used sparingly. The classic (and much-derived) example of a cursive font is Comic Sans

字体类型	描述
	衬线字体是最古老的印刷字体，其形式起源于罗马帝国时期。 衬线是在每个字母的笔划的终止点处放置的小结构细节。 衬线字体传统上用于商业出版：大多数书籍，报纸和杂志的正文都使用衬线字体。 如果您未指定在网页中使用的字体，则默认情况下，大多数浏览器都会使用衬线字体，例如Times或Times New Roman。 您可能会听到衬线字体，称为slab serif ， Egypt或Roman字体。
无衬线字体	Sans-serif字体是没有衬线结构的字体，但仍使用比例间距(将它们与等宽字体区分开)。 传统上用于标题的sans-serif字体正越来越多地用于正文复制。 经典的sans-serif字体包括Helvetica，Futura(Stanley Kubrick最喜欢的标题字体)和Gill Sans。 您可能还会听到无衬线字体，称为Gothic ， Doric ， humanist或linear字体。
	等宽字体是指每个字母使用相同数量的水平空间的字体。 (换句话说，等宽的A字符将为其保留与I相同的水平空间。)这使等宽的字体具有与计算机，电子产品和点矩阵打印机相关的外观。 经典的等宽字体包括Courier和Andale Mono； 等宽字体也可以称为固定间距 或非比例字体。 在HTML文档中，包装在<code>或<kbd>标记中的内容将使用浏览器的默认等宽字体设置样式。
幻想	尽管它们包含清晰的字符，但幻想字体主要用于装饰。 Mac的默认幻想字体Papyrus就是一个很好的例子，它是典型的懒惰排版员使用的go-to字体，用于赋予“异国情调”(最近使用，并且在某种程度上嘲讽，例如Na詹姆斯·卡梅隆(James Cameron)的《 阿凡达 》中的'vi语言字幕)。
	草书字体旨在类似于手写体，因此通常应谨慎使用。 草书字体的经典(且派生自广)示例是Comic Sans

This generic font-family is the end-cap to the choices for your declaration. In my case, Segoe UI Light is a sans-serif font, so my declaration so far would be:

这个通用的字体家族是您声明的选择的上限。 就我而言， Segoe UI Light是无衬线字体，因此到目前为止，我的声明是：

h2 {
	font-family: Segoe UI Light, sans-serif;
}

第三步 (Step Three)

Create a list of fonts between the ideal choice and the generic font family that are increasingly common and in declining order of preference, covering Mac, Windows and (ideally) Linux. In other words, the second font choice for our example should be as similar to Segoe UI Light as possible, but more common. The font should probably be in the same type classification as the first, ideal choice. For the Mac, I would argue that Helvetica (more ideally Helvetica Light) would be the best choice, as it is installed on 100% of OS X systems. Myriad would also be a good option. Arial (again, ideally a light version) would be a good final catch for both PC and Mac, with Nimbus Sans L to cover Linux. So our declaration would list these in declining order of preference:

在理想选择和通用字体家族之间创建一个字体列表，这些字体越来越普遍并且按优先级从高到低的顺序排列，包括Mac，Windows和(理想情况下)Linux。 换句话说，我们示例的第二种字体选择应尽可能类似于Segoe UI Light ，但更为常见。 字体应该与理想的第一个字体属于同一类型 。 对于Mac，我认为Helvetica(更理想的是Helvetica Light)将是最佳选择，因为它已安装在100％的OS X系统上。 无数也是一个不错的选择。 对于PC和Mac而言，Arial(还是理想的轻量级版本)都是不错的选择，Nimbus Sans L涵盖了Linux。 因此，我们的声明将按优先级从高到低的顺序列出这些内容：

h2 {
	font-family: Segoe UI Light, Helvetica Light, Helvetica, Myriad, Arial Light, Arial, Nimbus Sans L, sans-serif;
}

It is possible that fonts like Helvetica will have several font-weights built into them. Using a font-weight: 100 will make no difference to fonts that are already light, but may yield a light version of a standard font, so it should be added to the declaration.

像Helvetica这样的字体可能会内置多个字体粗细。 使用font-weight: 100对已经很浅的字体没有影响，但可能会产生标准字体的浅色版本，因此应将其添加到声明中。

有用的资源 (Useful resources)

The codestyle.org font stack builder is particularly useful, as it shows you estimates of installation (as a percentage of the web user base) for your chosen fonts in different operating systems. You might want to use TypeTester to compare different typefaces with CSS font-style properties. If you lack inspiration, TypeChart has a nice comparison of common fonts in various styles.

codestyle.org字体堆栈生成器特别有用，因为它显示了您在不同操作系统中所选字体的安装估计值(占Web用户基础的百分比)。 您可能要使用TypeTester将不同的字体与CSS字体样式属性进行比较。 如果您缺乏灵感， TypeChart可以很好地比较各种样式的常用字体。

If you're interested in visually comparing fonts, you might use Font Combinator or the FontDropper bookmarklet.

如果您对外观上的字体比较感兴趣，可以使用Font Combinator或FontDropper小书签。

PaddedCell has a useful chart which compares pre-installed fonts on Windows, Mac and Linux. Also handy is this matrix that goes a little further into versions of the operating systems, while covering fonts installed with popular applications.

PaddedCell有一个有用的图表 ，可以比较Windows，Mac和Linux上的预装字体。 这个矩阵也很方便，它可以应用于操作系统的版本，同时涵盖流行应用程序安装的字体。

翻译自: https://thenewcode.com/90/Three-Steps-to-Designing-A-Good-CSS-Font-Stack

字体设计 css