Web fonts

字體家庭重述

當我們在基本文字和字體樣式中查看時，可以使用 mozilla.org/zh-CN/docs/Web/CSS/font-family"> font-family 屬性。 這需要一個或多個字體系列名稱，瀏覽器沿著列表向下移動，直到找到它在運行的系統(tǒng)上可用的字體:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

這個系統(tǒng)工作得很好，但傳統(tǒng)上web開發(fā)人員的字體選擇有限。 只有少數(shù)幾種字體可以保證在所有常見系統(tǒng)中可用 - 所謂的 Web安全字體 a>。 您可以使用字體堆棧指定首選字體，其次是網(wǎng)絡(luò)安全選項，然后是默認系統(tǒng)字體，但這增加了測試方面的開銷，以確保您的設(shè)計看起來與每個字體等確定。

Web字體

但是有一個替代方案，其工作得很好，回到IE版本6.網(wǎng)絡(luò)字體是一個CSS功能，允許您指定字體文件，隨著您的網(wǎng)站下載，因為它被訪問，意味著任何瀏覽器支持網(wǎng)絡(luò) 字體可以具有您指定的字體。 驚人！ 所需的語法如下所示:

首先，您有 @ font-face / a>在CSS的開頭，指定要下載的字體文件:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

在下面，您可以使用@ font-face中指定的字體系列名稱將您的自定義字體應用到任何你喜歡的，正常:

html {
  font-family: "Bitstream Vera Serif Bold", serif;
}

語法確實比這更復雜一點; 我們將在下面詳細介紹。

有兩個重要的事情要記住網(wǎng)絡(luò)字體:

1. Browsers support different font formats, so you'll need multiple font formats for decent cross browser support. For example, most modern browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2), the most efficient format around, but older versions of IE only support EOT (Embedded Open Type) fonts, and you might need to include an SVG version of the font to support older versions of iPhone and Android browsers. We'll show you below how to generate the required code.
2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.

主動學習:一個web字體示例

考慮到這一點，讓我們從第一個原則構(gòu)建一個基本的Web字體示例。 很難使用嵌入式活動示例來演示這一點，因此，我們希望您按照以下部分中詳述的步驟來了解流程。

您應該使用 > web-font-start.html 和 start.css"class ="external"> web-font-start.css 文件作為開始添加您的代碼(參見 -area / css / styling-text / web-fonts / web-font-start.html"class ="external">示例正在運行。)在計算機的新目錄中創(chuàng)建這些文件的副本 現(xiàn)在。 在 web-font-start.css 文件中，您將找到一些最小的CSS來處理示例的基本布局和排版。

查找字體

在本例中，我們將使用兩種網(wǎng)絡(luò)字體，一種用于標題，一種用于正文文本。 首先，我們需要找到包含字體的字體文件。 字體由字體鑄造廠創(chuàng)建，并以不同的文件格式存儲。 通常有三種類型的網(wǎng)站，您可以在其中獲取字體:

• A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include Font Squirrel, dafont, and Everything Fonts.
• A paid font distributor: This is a site that makes fonts available for a charge, such as fonts.com or myfonts.com. You can also buy fonts directly from fount foundaries, for example Linotype, Monotype, or Exljbris.
• An online font service: This is a site that stores and serves the fonts for you, making the whole process easier. See the Using an online font service section for more details.

讓我們找到一些字體！ 轉(zhuǎn)到字體松鼠并選擇兩種字體 - 標題的一個很有趣的字體(也許一個不錯的顯示或板襯線 字體)，以及稍微少些閃光和更易讀的字體。 當您找到每個字體時，按下載按鈕，并將文件保存在與先前保存的HTML和CSS文件相同的目錄中。 它們是TTF(True Type Fonts)還是OTF(Open Type Fonts)都沒有關(guān)系。

在每種情況下，解壓縮字體包(Web字體通常分布在包含字體文件和許可信息的ZIP文件中。)您可能會在包中找到多個字體文件 - 一些字體分布為不同變體族 ，例如thin，medium，bold，italic，thin italic等。對于這個例子，我們只是想讓你關(guān)心每個選擇的單個字體文件。

生成所需的代碼

現(xiàn)在你需要生成所需的代碼(和字體格式)。 對于每種字體，請按照下列步驟操作:

1. Make sure you have satisfied any licensing requirement, if you are going to use this in a commercial and/or Web project.
2. Go to the Fontsquirrel Webfont Generator.
3. Upload your two font files using the Upload Fonts button.
4. Check the checkbox labelled "Yes, the fonts I'm uploading are legally eligible for web embedding."
5. Click Download your kit.

生成器完成處理后，您應該得到一個ZIP文件下載 - 將其保存在與HTML和CSS相同的目錄中。

在您的演示中實現(xiàn)代碼

此時，請解壓縮您剛剛生成的Web字體套件。 在解壓縮的目錄中，您將看到三個有用的項目:

• Multiple versions of each font: .eot, .svg, .ttf, .woff, .woff2. As mentioned above, multiple fonts are needed for cross browser support — this is Fontsquirrel's way of making sure you've got everything you need.
• A demo HTML file for each font — load these in your browser to see what the font will look like in different usage contexts.
• A stylesheet.css file, which contains the generated @font-face code you'll need.

要在演示中實現(xiàn)這些字體，請按照下列步驟操作:

1. Rename the unzipped directory to something easy and simple, like fonts.
2. Open up the stylesheet.css file, and copy both the @font-face blocks contained inside into your web-font-start.css file — you need to put them at the very top, before any of your CSS, as the fonts need to be imported before you can use them on your site.
3. Each of the url() functions points to a font file that we want to import into our CSS — we need to make sure the paths to the files are correct, so add fonts/ to the start of each path (adjust as necessary.)
4. Now you can use these fonts in your font stacks, just like any web safe or default system font. For example:

   font-family: 'zantrokeregular', serif;

你應該最終得到一個演示頁面，在其上實現(xiàn)一些漂亮的字體。 由于不同的字體以不同的大小創(chuàng)建，因此您可能需要調(diào)整大小，間距等，以便整理外觀和感覺。

margin:0px auto;">

使用在線字體服務(wù)

在線字體服務(wù)通常為您存儲和提供字體，因此您不必擔心編寫 @ font-face 代碼，通常只需在您的網(wǎng)站中插入一行或兩個代碼 使一切工作。 示例包括 Typekit 和 "external"> Cloud.typography 。 這些服務(wù)中的大多數(shù)都是基于訂閱的，除了 Google字體(一種有用的免費服務(wù))，尤其是 用于快速測試工作和寫作演示。

大多數(shù)這些服務(wù)都很容易使用，所以我們不會詳細介紹。 讓我們快速瀏覽一下Google字體，這樣你就可以得到想法。 同樣，使用 web-font-start.html 和 web-font-start.css 的副本作為起點。

1. Go to Google Fonts.
2. Use the filters on the left hand side to display the kinds of fonts you want to choose, and choose a couple of fonts you like.
3. To select a font, press the Add to Collection button alongside it.
4. When you've chosen the fonts, press the Use button in the bottom section of the page.
5. In the resulting screen, you first need to copy the line of code shown in section 3, and paste it into the head of your HTML file. Put it above the existing <link> element, so that the font is imported before you try to use it in your CSS.
6. You then need to copy the declarations listed in section 4 into your CSS as appropriate, to apply the custom fonts to your HTML.

@ font-face更詳細

讓我們來探索fontsquirrel為你生成的 @ font-face 語法。 這是其中一個塊看起來像:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

這被稱為"bulletproof @ font-face syntax"，在保羅愛爾蘭從早期 @ font-face 開始流行( .paulirish.com / 2009 / bulletproof-font-face-implementation-syntax /"class ="external"> Bulletproof @ font-face語法)。 讓我們來看看它做了什么:

• font-family: This line specifies the name you want to refer to the font to. You can put this as anything you like, as long as you use it consistently throughout your CSS.
• src: These lines specify the paths to the font files to be imported into your CSS (the url part), and the format of each font file (the format part). The latter part in each case is optional, but it is useful to declare it because it allows browsers to find a font they can use faster. Multiple declarations can be listed, separated by commas — the browser will search through them and use the first one it can find that it understands — it is therefore best to put newer, better formats like WOFF2 earlier on, and older, not so good formats like TTF later on. The one exception to this is the EOT fonts — they are placed as they are to fix a couple of bugs in older versions of IE whereby IE will try to use the first thing it finds, even if it can't actually use the font.
• font-weight/font-style: These lines specify what weight the font has, and whether it is italic or not. If you are importing multiple weights of the same font, you can specify what their weight/style is and then use different values of font-weight/font-style to choose between them, rather than having to call all the different members of the font family different names. @font-face tip: define font-weight and font-style to keep your CSS simple by Roger Johansson shows what to do in more detail.

概要

現(xiàn)在你已經(jīng)完成了我們關(guān)于文本造型基礎(chǔ)的文章，現(xiàn)在是時候測試你的理解與我們的模塊，排版社區(qū)學校的主頁的評估。