字體設計 css

使用@ font-face的Web字體 (Web Fonts with @font-face)

Since the early days of the Web, designers have been dreaming of creating sites with beautiful typography. But, as we know all too well, browsers are limited to rendering text in the fonts the user has installed on their system. In practical terms, this has limited most sites to a handful of fonts: Arial, Verdana, Times, Georgia, and a few others.

從Web的早期開始，設計人員就夢想著創建具有漂亮字體的網站。 但是，眾所周知，瀏覽器僅限于以用戶在系統上安裝的字體呈現文本。 實際上，這將大多數站點限制為少數幾種字體：Arial，Verdana，Times，Georgia等。

Over the years, we have come up with a number of clever workarounds for this problem. We created JPEGs and PNGs for site titles, logos, buttons, and navigation elements. When those elements required additional states or variants, we created even more images, or image sprites to ensure the page stayed snappy and responsive. Whenever the design or text changed, all those images had to be recreated.

多年來，我們針對此問題提出了許多巧妙的解決方法。 我們為網站標題，徽標，按鈕和導航元素創建了JPEG和PNG。 當這些元素需要其他狀態或變體時，我們創建了更多圖像或圖像精靈，以確保頁面保持活潑和響應。 每當設計或文本更改時，都必須重新創建所有這些圖像。

This can be an acceptable solution for some elements on a page, but it’s just unrealistic to expect a designer to handcraft the title of every new article in Photoshop and then upload it to the site. So, for key page elements that need to change frequently, we were stuck with those same few fonts.

對于頁面上的某些元素來說，這可能是可以接受的解決方案，但是期望設計人員在Photoshop中手工制作每篇新文章的標題，然后將其上傳到網站上，這是不現實的。 因此，對于需要經常更改的關鍵頁面元素，我們只能使用那些相同的幾種字體。

To fill this typographic void, some very cool font embedding scripts were created, like sIFR, based on Flash and JavaScript, and the canvas-based Cufón. While these methods have been a great stopgap measure, allowing us to include our own fonts, they had severe drawbacks. Sometimes they were tricky to implement, and they required that JavaScript be enabled and, in the case of sIFR, the Flash plugin be installed. In addition, they significantly slowed the page’s download and rendering.

為了填補這種印刷上的空白，創建了一些非常酷的字體嵌入腳本，例如基于Flash和JavaScript的sIFR，以及基于畫布的Cufón。 盡管這些方法是一個很好的權宜之計，可以讓我們包括自己的字體，但它們也有嚴重的缺陷。 有時它們很難實現，并且它們要求啟用JavaScript，并且對于sIFR，需要安裝Flash插件。 此外，它們大大減慢了頁面的下載和渲染速度。

Fortunately, there’s now a better way: @font-face is a pure CSS solution for embedding fonts—and it’s supported on every browser with any kind of market share, from IE6 on up.

幸運的是，現在有了更好的方法： @font-face是用于嵌入字體的純CSS解決方案-從IE6開始，具有各種市場份額的每種瀏覽器均支持該解決方案。

實施@ font-face (Implementing @font-face)

@font-face is one of several CSS at-rules, like @media, @import, @page, and the one we’ve just seen, @keyframes. At-rules are ways of encapsulating several rules together in a declaration to serve as instructions to the browser’s CSS processor. The @font-face at-rule allows us to specify custom fonts that we can then include in other declaration blocks.

@font-face是幾個CSS的一個在規則 ，如@media ， @import ， @page ，我們剛剛看到的一個， @keyframes 。 規則是將多個規則封裝在聲明中以充當對瀏覽器CSS處理器的指令的方法。 @font-face規則允許我們指定自定義字體，然后可以將其包含在其他聲明塊中。

To include fonts using @font-face, you have to:

要使用@font-face包含字體，您必須：

load the font file onto your servers in a variety of formats to support all the different browsers

將字體文件以各種格式加載到服務器上，以支持所有不同的瀏覽器

name, describe, and link to that font in an @font-face rule

在@font-face規則中命名，描述并鏈接到該字體

include the font’s name in a font-family property value, just as you would for system fonts

就像在系統字體中一樣，將字體名稱包含在font-family屬性值中

You already know how to upload a file onto a server, so we’ll discuss the details of the various file types in the next section. For now, we’ll focus on the second and third steps so that you can become familiar with the syntax of @font-face.

您已經知道如何將文件上傳到服務器，因此在下一節中我們將討論各種文件類型的詳細信息。 現在，我們將專注于第二步和第三步，以便您可以熟悉@font-face的語法。

Here’s an example of an @font-face block:

這是@font-face塊的示例：

@font-face {font-family: 'fontName';src: source;font-weight: weight;font-style: style; }

The font family and source are required, but the weight and style are optional.

字體系列和來源是必需的，但是粗細和樣式是可選的。

You need to include a separate @font-face at-rule for every font you contain in your site. You’ll also have to include a separate at-rule for each variation of the font—regular, thin, thick, italic, black, and so on.

您需要為網站中包含的每種字體包含一個單獨的@font-face規則。 您還必須為字體的每種變體(常規，細，粗，斜體，黑色等)包含一個單獨的規則。

The font-family part of the @font-face at-rule declaration is slightly different from the font-family property with which you’re already familiar. In this case, we’re declaring a name for our font, rather than assigning a font with a given name to an element. The font name can be anything you like—it’s only a reference to a font file, so it needn’t even correspond to the name of the font. Of course, it makes sense to use the font’s name to keep your CSS readable and maintainable. It’s good to settle on a convention and stick to it for all your fonts.

該font-family的一部分@font-face在規則的聲明是從稍微不同的font-family與你已經熟悉的屬性。 在這種情況下，我們要為字體聲明一個名稱，而不是將具有給定名稱的字體分配給元素。 字體名稱可以是任何您喜歡的名稱，它只是對字體文件的引用，因此甚至不需要與字體名稱相對應。 當然，使用字體名稱來保持CSS的可讀性和可維護性是有意義的。 最好約定一個約定并堅持使用所有字體。

@font-face {font-family: 'LeagueGothic'; }@font-face {font-family: 'AcknowledgementMedium'; }

聲明字體來源 (Declaring Font Sources)

Now that we have a skeleton laid out for our @font-face rules, and we’ve given each of them a name, it’s time to link them up to the actual font files. The src property can take several formats. Additionally, you can declare more than one source. If the browser fails to find the first source, it will try for the next one, and so on, until it either finds a source, or it runs out of options.

既然我們已經為@font-face規則設置了框架，并且為它們指定了名稱，那么現在是將它們鏈接到實際字體文件的時候了。 src屬性可以采用幾種格式。 此外，您可以聲明多個來源。 如果瀏覽器找不到第一個來源，它將嘗試尋找下一個，依此類推，直到找到一個來源，或者用盡了所有選項。

Let’s add more formats to our League Gothic declaration:

讓我們為聯賽哥特式宣言添加更多格式：

@font-face {font-family: 'LeagueGothicRegular';src: url('../fonts/League_Gothic-webfont.eot') format('eot'),url('../fonts/League_Gothic-webfont.woff') format('woff'),url('../fonts/League_Gothic-webfont.ttf') format('truetype'),url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); }

There are four font sources listed in the code block above. The first declaration is an EOT font declaration, a proprietary format for Internet Explorer, and the only file type understood by IE4–8.

上面的代碼塊中列出了四個字體來源。 第一個聲明是EOT字體聲明，是Internet Explorer的專有格式，并且是IE4-8理解的唯一文件類型。

Then we define the WOFF (Web Open Font Format, an emerging standard), OTF (OpenType), TTF (TrueType), and SVG (Scalable Vector Graphics) font files. While most desktop browsers will use one of the first three declarations, be sure to include the SVG format, which was originally the only format supported by the iPhone.

然后，我們定義WOFF(Web開放字體格式，一種新興標準)，OTF(OpenType)，TTF(TrueType)和SVG(可縮放矢量圖形)字體文件。 盡管大多數桌面瀏覽器將使用前三個聲明之一，但請確保包括SVG格式，該格式最初是iPhone支持的唯一格式。

Adding these extra font formats ensures support for every browser, but unfortunately it will cause problems in versions of IE older than IE9. Those browsers will see everything between the first url(' and the last ') as one URL, so will fail to load the font. At first, it would seem that we’ve been given the choice between supporting IE and supporting every other browser, but fortunately there’s a solution. Detailed in a FontSpring blog post, it involves adding a query string to the end of the EOT URL. This tricks the browser into thinking that the rest of the src property is a continuation of that query string, so it goes looking for the correct URL and loads the font:

添加這些額外的字體格式可確保對每個瀏覽器的支持，但是不幸的是，這將在IE9之前的版本中引起問題。 這些瀏覽器會將第一個url('和最后一個')之間的所有內容視為一個URL，因此將無法加載字體。 最初，似乎已經在支持IE和支持其他所有瀏覽器之間做出了選擇，但是幸運的是有一個解決方案。 FontSpring博客文章中對此進行了詳細介紹 ，它涉及在EOT URL的末尾添加一個查詢字符串。 這使瀏覽器欺騙，以為src屬性的其余部分是該查詢字符串的延續，因此它會尋找正確的URL并加載字體：

@font-face {font-family: 'LeagueGothicRegular';src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),url('../fonts/League_Gothic-webfont.woff') format('woff'),url('../fonts/League_Gothic-webfont.ttf') format('truetype'),url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); }

This syntax has one potential point of failure: IE9 has a feature called compatibility mode, in which it will attempt to render pages the same way IE7 or 8 would. This was introduced to prevent older sites appearing broken in IE9’s more standards-compliant rendering. However, IE9 in compatibility mode doesn’t reproduce the bug in loading the EOT font, so the above declaration will fail. To compensate for this, you can add an additional EOT URL in a separate src property:

此語法有一個潛在的故障點：IE9具有一種稱為兼容性模式的功能，在該模式中，它將嘗試以與IE7或8相同的方式呈現頁面。 這樣做是為了防止較舊的網站在IE9的更符合標準的渲染中出現損壞。 但是，兼容模式下的IE9不會重現加載EOT字體的錯誤，因此上述聲明將失敗。 為了彌補這一點，您可以在單獨的src屬性中添加其他EOT URL：

@font-face {font-family: 'LeagueGothicRegular';src: url('../fonts/League_Gothic-webfont.eot');src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),url('../fonts/League_Gothic-webfont.woff') format('woff'),url('../fonts/League_Gothic-webfont.ttf') format('truetype'),url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); }

This may be an unnecessary precaution, as generally a user would need to deliberately switch IE to compatibility mode while viewing your site for this issue to arise. Alternatively, you could also force IE out of compatibility mode by adding this meta element to your document’s head:

這可能是不必要的預防措施，因為通常用戶在查看您的站點時需要故意將IE切換到兼容模式，以防止出現此問題。 另外，您也可以通過將此meta元素添加到文檔的head來強制IE退出兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

It’s also possible to achieve the same result by adding an extra HTTP header; this can be done with a directive in your .htaccess file (or equivalent):

通過添加一個額外的HTTP標頭也可以達到相同的結果。 這可以通過.htaccess文件(或等效文件)中的指令來完成：

<IfModule mod_setenvif.c><IfModule mod_headers.c>BrowserMatch MSIE ieHeader set X-UA-Compatible "IE=Edge"</IfModule> </IfModule>

字體屬性描述符 (Font Property Descriptors)

Font property descriptors—including font-style, font-variant, font-weight, and others—can optionally be added to define the characteristics of the font face, and are used to match styles to specific font faces. The values are the same as the equivalent CSS properties:

可以選擇添加字體屬性描述符(包括font-style ， font-variant ， font-weight等)來定義字體的特征，并用于將樣式與特定的字體匹配。 這些值與等效CSS屬性相同：

@font-face {font-family: 'LeagueGothicRegular';src: url('../fonts/League_Gothic-webfont.eot');src: url('../fonts/League_Gothic-webfont.eot?#iefix')format('eot'),url('../fonts/League_Gothic-webfont.woff') format('woff'),url('../fonts/League_Gothic-webfont.ttf') format('truetype'),url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');font-weight: bold;font-style: normal; }

Again, the behavior is different from what you’d expect. You are not telling the browser to make the font bold; rather, you’re telling it that this is the bold variant of the font. This can be confusing, and the behavior can be quirky in some browsers.

同樣，該行為與您期望的不同。 您不是在告訴瀏覽器將字體加粗。 相反，您告訴它這是字體的粗體變體。 這可能會造成混淆，并且某些瀏覽器中的行為可能很古怪。

However, there is a reason to use the font-weight or font-style descriptor in the @font-face rule declaration. You can declare several font sources for the same font-family name:

但是，有理由在@font-face規則聲明中使用font-weight或font-style描述符。 您可以為同一font-family名稱聲明多個字體來源：

@font-face {font-family: 'CoolFont';font-style: normal;src: url(fonts/CoolFontStd.ttf); }@font-face {font-family: 'CoolFont';font-style: italic;src: url(fonts/CoolFontItalic.ttf); }.whichFont {font-family: 'CoolFont'; }

Notice that both at-rules use the same font-family name, but different font styles. In this example, the .whichFont element will use the CoolFontStd.ttf font, because it matches the style given in that at-rule. However, if the element were to inherit an italic font style, it would switch to using the CoolFontItalic.ttf font instead.

請注意，兩個規則都使用相同的字體系列名稱，但使用不同的字體樣式。 在此示例中， .whichFont元素將使用CoolFontStd.ttf字體，因為它與該規則中給定的樣式匹配。 但是，如果元素要繼承斜體字體樣式，它將改為改用CoolFontItalic.ttf字體。

Unicode范圍 (Unicode Range)

Also available is the unicode-range descriptor, which is employed to define the range of Unicode characters supported by the font. If this property is omitted, the entire range of characters included in the font file will be made available. We won’t be using this on our site, but here’s an example of what it looks like:

unicode-range描述符也可用，該描述符用于定義字體支持的Unicode字符范圍。 如果省略此屬性，則字體文件中包含的整個字符范圍將變為可用。 我們不會在我們的網站上使用它，但是下面是一個示例：

unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;

應用字體 (Applying the Font)

Once the font is declared using the @font-face syntax, you can then refer to it as you would any normal system font in your CSS: include it in a “stack” as the value of a font-family property. It’s a good idea to declare a fallback font or two in case your embedded font fails to load.

一旦使用@font-face語法聲明了@font-face ，就可以像在CSS中使用任何普通系統字體一樣引用它：將其作為font-family屬性的值包含在“堆棧”中。 最好聲明一個或兩個后備字體，以防嵌入字體加載失敗。

h1 {text-shadow: #fff 1px 1px;font-family: LeagueGothic, Tahoma, Geneva, sans-serif;text-transform: uppercase;line-height: 1; }

Our two embedded fonts are used in a number of different places in our stylesheet, but you get the idea.

我們的兩種嵌入字體在樣式表中的許多不同地方都使用過，但是您可以理解。

對@ font-face進行故障排除 (Troubleshooting @font-face)

If your fonts are failing to display in any browser, the problem could very well be the path in your CSS. Check to make sure that the font file is actually where you expect it to be. Browser-based debugging tools –such as the Web Inspector in WebKit, Dragonfly in Opera, or the Firebug Firefox extension — will indicate if the file is missing.

如果您的字體無法在任何瀏覽器中顯示，則問題很可能是CSS中的路徑。 檢查以確保字體文件確實在您期望的位置。 基于瀏覽器的調試工具(例如WebKit中的Web Inspector，Opera中的Dragonfly或Firebug Firefox擴展)將指示文件是否丟失。

If you’re sure that the path is correct and the file is where it’s supposed to be, make sure your server is correctly configured to serve up the fonts. Windows IIS servers won’t serve up files if they’re unable to recognize their MIME type, so try adding WOFF and SVG to your list of MIME types (EOT and TTF should be supported out of the box):

如果您確定路徑正確并且文件位于預期的位置，請確保已正確配置服務器以提供字體。 如果Windows IIS服務器無法識別其MIME類型，則它們將不會提供文件，因此請嘗試將WOFF和SVG添加到您的MIME類型列表中(開箱即用地支持EOT和TTF)：

.woff application/x-font-woff .svg image/svg+xml

Finally, some browsers require that font files be served from the same domain as the page they’re embedded on.

最后，某些瀏覽器要求字體文件與其嵌入頁面的域相同。

This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.

這是Alexis Goldstein，Louis Lazaris和Estelle Weyl撰寫的HTML5＆CSS3 for Real World的摘錄。

翻譯自: https://www.sitepoint.com/introduction-css3-font-face-design/

字體設計 css

總結

以上是生活随笔為你收集整理的字体设计 css_CSS3字体设计简介的全部內容，希望文章能夠幫你解決所遇到的問題。

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