字體設計 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 TypeDescription

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

總結

以上是生活随笔為你收集整理的字体设计 css_设计好CSS字体堆栈的三个步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。