js字體溢出字體變小

In this article, we’ll take a look at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.

在本文中，我們將研究圍繞可變字體的各種令人興奮的新可能性-現在已與OpenType可縮放字體格式捆綁在一起-允許單個字體表現為多種字體。

我們如何來到這里 (How We Got Here)

When HTML was created, fonts and styles were controlled exclusively by the settings of each web browser. In the mid ’90s, the first typefaces for screen-based media were created: Georgia and Verdana. These, together with the system fonts — Arial, Times New Roman, and Helvetica — were the only fonts available for web browsers (not exactly the only ones, but the ones we could find in every operating system).

創建HTML時，字體和樣式僅由每個Web瀏覽器的設置控制。 在90年代中期，創建了第一類基于屏幕的媒體字體：喬治亞州和韋爾達納。 這些字體和系統字體(Arial，Times New Roman和Helvetica)一起是可用于Web瀏覽器的唯一字體(并非唯一的字體，而是我們可以在每個操作系統中找到的字體)。

With the evolution of web browsers, innovations like the <font> tag on Netscape Navigator and the first CSS specification allowed web pages to control what font was displayed. However, these fonts needed to be installed on the user’s computer.

隨著Web瀏覽器的發展， Netscape Navigator上的<font>標記和第一個CSS規范等創新使Web頁可以控制顯示的字體。 但是，這些字體需要安裝在用戶的計算機上。

In 1998, the CSS working group proposed the support of the @font-face rule to allow any typeface to be rendered on web pages. IE4 implemented the technology but the distribution of fonts to every user’s browser raised licensing and piracy issues.

1998年，CSS工作組提議支持@font-face規則，以允許在網頁上呈現任何字體。 IE4實施了該技術，但是將字體分配給每個用戶的瀏覽器卻引發了許可和盜版問題。

The early 2000s saw the rise of image replacement techniques which substituted HTML content with styled-text images. Each piece of text had to be sliced in programs like Photoshop. This technique had the major advantage of allowing designers to use any typeface available without having to deal with font licensing.

2000年代初，圖像替換技術興起，該技術將HTML內容替換為樣式文本圖像。 每段文字都必須在Photoshop之類的程序中進行切片。 該技術的主要優點是允許設計人員使用任何可用的字體，而無需處理字體許可。

In 2008, @font-face finally made a comeback when Apple Safari and Mozilla Firefox implemented it. This came out of the necessity of providing a simple way for designers and developers to use custom fonts rather than inaccessible images.

2008年，當Apple Safari和Mozilla Firefox實施@font-face終于卷土重來。 這是因為必須為設計人員和開發人員提供一種使用自定義字體而不是無法訪問的圖像的簡單方法。

It wasn’t until the arrival of the CSS3 Fonts Module in 2012 that font downloading became viable. Once implemented, a font downloaded by a web page could only be used on that page and not copied to the operating system. Font downloading allowed remote fonts to be downloaded and used by the browser, meaning that web designers could now use fonts that were not installed on the user’s computer. When web designers found the font they wished to use, they just needed to include the font file on the web server, and it would be automatically downloaded to the user when needed. These fonts were referenced using the @font-face rule.

直到2012年CSS3字體模塊出現，字體下載才變得可行。 一旦實現，網頁下載的字體只能在該頁面上使用，而不能復制到操作系統。 字體下載允許瀏覽器下載和使用遠程字體，這意味著Web設計人員現在可以使用用戶計算機上未安裝的字體。 當Web設計人員找到他們希望使用的字體時，他們只需要在Web服務器上包括字體文件，然后在需要時將其自動下載給用戶。 這些字體是使用@font-face規則引用的。

To use the @font-face rule we have to define a font name and point to the font file:

要使用@font-face規則，我們必須定義字體名稱并指向字體文件：

@font-face {font-family: Avenir Next Variable;src: url(AvenirNext_Variable.woff); }

The font file can be one of five different formats: TTF, WOFF, WOFF2, SVG or EOT. Each has its own advantages and disadvantages. Putting it simply, EOT was created by Microsoft and only is supported by Internet Explorer. TTF is the basic type font created by Microsoft and Apple, and it works almost perfectly everywhere. SVG is based on image replacement techniques and is only suitable for the Web. Finally, WOFF and WOFF2 were also created exclusively for the Web and are basically TTF files with extra compression.

字體文件可以是以下五種格式之一：TTF，WOFF，WOFF2，SVG或EOT。 每種都有自己的優點和缺點 。 簡而言之，EOT由Microsoft創建，并且僅受Internet Explorer支持。 TTF是Microsoft和Apple創建的基本字體，它幾乎可以在任何地方正常工作。 SVG基于圖像替換技術，僅適用于Web。 最后，WOFF和WOFF2也是專門為Web創建的，基本上是經過額外壓縮的TTF文件。

可變字體 (Variable Fonts)

Version 1.8 of OpenType (the computer scalable font format) was released in 2016. A brand new technology shipped with it: OpenType font variations, also known as variable fonts.

OpenType 1.8版(計算機可縮放字體格式)于2016年發布。它附帶了一項全新技術：OpenType字體變體，也稱為可變字體 。

This technology allows a single font to behave like multiple fonts. It’s done by defining variations within the font. These variations come from the fact that each character only has one outline. The points that construct this outline have instructions on how they should behave. It’s not necessary to define multiple font weights because they can be interpolated between very narrow and very wide definitions. This also makes it possible to generate styles in between — for example, semi-bold and bold. These variations may act along one or more axes of the font. On the image below, we have an example of this outline interpolation on the letter A.

這項技術允許單個字體的行為類似于多種字體。 通過定義字體內的變體來完成。 這些變化來自每個字符只有一個輪廓的事實。 構成此大綱的要點對它們的行為方式進行了說明。 不必定義多個字體粗細，因為可以在非常窄和非常寬的定義之間進行插值。 這樣還可以生成介于兩者之間的樣式，例如，半粗體和粗體。 這些變化可能沿字體的一個或多個軸起作用。 在下圖上，我們在字母A上有一個輪廓插值的示例。

為什么可變字體相關？ (Why are Variable Fonts Relevant?)

Variable fonts can bring both simplicity to our font structure and performance improvements. Take for example a situation where our website needs five font styles. It would be significantly smaller and faster to provide a single variable font capable of rendering those five styles than to have to load five different font files.

可變字體可以為我們的字體結構帶來簡化，并提高性能。 以我們的網站需要五種字體樣式的情況為例。 提供能夠呈現這五種樣式的單一可變字體比必須加載五個不同的字體文件要小得多，而且速度更快。

使用可變字體 (Using Variable Fonts)

There are currently two different ways to use variable fonts. First, we’ll look at the modern way of implementing those. The CSS specification strongly prefers using font-optical-sizing, font-style, font-weight and font-stretch for controlling any of the standard axes.

當前有兩種使用可變字體的不同方法。 首先，我們將研究實現這些目標的現代方法。 CSS規范強烈建議使用font-optical-sizing ， font-style ， font-weight和font-stretch來控制任何標準軸。

font-optical-sizing (font-optical-sizing)

This property allows developers to control whether or not browsers render text with slightly different visual representations to optimize viewing at different sizes. It can take the value none, for when the browser cannot modify the shape of glyphs, or auto for when it can. On a browser that supports font-optical-sizing, a font where the value is set to auto can vary like the font in the image below:

此屬性使開發人員可以控制瀏覽器是否以稍微不同的視覺表示來呈現文本，以優化不同大小的查看。 當瀏覽器無法修改字形的形狀時，可以采用none值；在可以的情況下，可以采用auto值。 在支持font-optical-sizing的瀏覽器上，將值設置為auto的字體可能會有所不同，如下圖所示：

With the value set to none there would be no variation to the font.

將該值設置為none ，字體將沒有變化。

font-style (font-style)

This property specifies whether a font should be styled with a normal, italic, or oblique face from its font family. It can take the normal, italic or oblique values.

此屬性指定是使用字體系列中的普通，斜體還是斜面來設置字體樣式。 它可以采用normal ， italic或oblique值。

font-weight (font-weight)

This property specifies the weight (or boldness) of the font. One thing to note is that, with normal fonts, named instances can be defined. For example, bold is the same as font-weight: 700 or extra-light is the same as font-weight: 200. The font-weight property can also be any number between 1 and 1000, but when using variable fonts, due to the interpolarity, we can have a much finer granularity. For example, a value like font-weight: 200.01 is now possible.

此屬性指定字體的粗細(或粗體)。 需要注意的一件事是，使用普通字體可以定義命名實例。 例如， bold與font-weight: 700相同，或者extra-light與font-weight: 200 。 font-weight屬性也可以是1到1000之間的任何數字，但是當使用可變字體時，由于極性之間的關系，我們可以具有更好的粒度。 例如，現在可以使用諸如font-weight: 200.01類的值。

font-stretch (font-stretch)

This property selects a normal, condensed, or expanded face from a font. Just like the font-weight property, it can be a named instance like extra-condensed or normal or a percentage between 0% and 100%. Also, named instances will map to known percentages. For example, extra-condensed will map to 62.5%.

此屬性從字體中選擇普通，壓縮或擴展的面Kong。 就像font-weight屬性一樣，它可以是一個命名實例，例如extra-condensed或normal或0％到100％之間的百分比。 同樣，命名實例將映射到已知百分比。 例如， extra-condensed將映射為62.5％。

For this example, I created a very simple page with a single <h1> heading and <p> paragraph.

對于此示例，我創建了一個非常簡單的頁面，其中包含單個<h1>標題和<p>段落。

See the Pen Variable Fonts HTML by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint ( @SitePoint )提供的Pen Variable Fonts HTML 。

Currently, our unstyled webpage looks like this:

目前，我們未樣式化的網頁如下所示：

To use a variable font, we must find a suitable file. The v-fonts project provides a font repository where we can search and experiment with all type of variable fonts. I decided to use the AvenirNext font and link it from its official GitHub page.

要使用可變字體，我們必須找到合適的文件。 v-fonts項目提供了一個字體庫，我們可以在其中搜索和嘗試所有類型的可變字體。 我決定使用AvenirNext字體，并從其GitHub官方頁面進行鏈接。

Then we need to create a CSS file to load this new font:

然后，我們需要創建一個CSS文件來加載此新字體：

@font-face {font-family: 'Avenir Next Variable';src: url('AvenirNext_Variable.ttf') format('truetype'); }body {font-family: 'Avenir Next Variable', sans-serif; }

See the Pen Loaded variable font by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint ( @SitePoint )的Pen Loaded可變字體 。

Due to browser support issues, this example will only apply font variations in Safari and Chrome.

由于瀏覽器支持問題，此示例將僅在Safari和Chrome中應用字體變體。

With our font loaded, we can now use the font-weight property to manipulate the weight axis of our variable font.

加載字體后，我們現在可以使用font-weight屬性來控制可變字體的權重軸。

h1 {font-family: 'Avenir Next Variable';font-weight: 430; }

See the Pen SourceSans variable font by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint ( @SitePoint )提供的Pen SourceSans可變字體 。

Most of the time we’ll also need two different font files: one for italic and one for regular fonts (roman). This happens because the construction of these fonts can be radically different.

大多數時候，我們還需要兩個不同的字體文件：一個用于斜體，一個用于常規字體(羅馬)。 發生這種情況是因為這些字體的構造可能完全不同。

使用字體變化設置 (Using font-variation-settings)

The second way of using variable fonts is by using the font-variation-settings CSS property. This property was introduced to provide control over OpenType or TrueType font variations, by specifying the four-letter axis names of the features you want to vary along with their variation values. Currently, we have access to the following aspects of the font:

使用可變字體的第二種方法是使用font-variation-settings CSS屬性。 引入此屬性是為了控制OpenType或TrueType字體變體 ，方法是指定要變化的要素的四個字母的軸名稱及其變體值。 當前，我們可以訪問字體的以下方面：

• wght — weight, which is identical to the font-weight CSS property. The value can be anything from 1 to 999.

  wght —粗細，與font-weight CSS屬性相同。 取值范圍是1到999。

• wdth — width, which is identical to by the font-stretch CSS property. It can take a keyword or a percentage value. This axis is normally defined by the font designer to expand or condense elegantly.

  wdth —寬度，與font-stretch CSS屬性相同。 它可以包含關鍵字或百分比值。 該軸通常由字體設計者定義，以優雅地擴展或壓縮。

• opsz — optical sizing, which can be turned on and off using the font-optical-sizing property.

  opsz —光學尺寸調整，可以使用font-optical-sizing屬性打開和關閉。

• ital — italicization, which is controlled by the font-style CSS property when is set to italic.

  ital —斜體，當設置為italic時，由font-style CSS屬性控制。

• slnt — slant, which is identical to the font-style CSS property when it’s set to oblique. It will default to a 20 degree slant, but it can also accept a specified degree between -90deg and 90deg.

  slnt —傾斜，設置為oblique時，它與font-style CSS屬性相同。 它的默認傾斜角度為20度，但也可以接受-90度到90度之間的指定角度。

According to the specification, this property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists. Because of that, we should try to use @font-face instead.

根據規范 ，此屬性是低級功能，旨在處理在沒有其他啟用或訪問OpenType字體功能的特殊情況下的特殊情況。 因此，我們應該嘗試使用@font-face代替。

Using the same webpage and font as above, let’s try to set the weight and width on our font using the low-level controller:

使用與上述相同的網頁和字體，讓我們嘗試使用低級控制器設置字體的粗細和寬度：

p {font-variation-settings: 'wght' 630, 'wdth' 88; }

See the Pen Variable fonts 1 by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint ( @SitePoint )的Pen Variable字體1 。

The declaration is equivalent to the following CSS declaration:

該聲明等效于以下CSS聲明：

p {font-weight: 630;font-stretch: 88; }

性能 (Performance)

Performance is a key advantage of variable fonts. The AvenirNext_Variable.ttf font file is only 89kB but creates a range of weights. A comparable standard font may have a smaller file but would only support one weight and style. Further options require additional files and raise the page weight accordingly.

性能是可變字體的主要優勢。 AvenirNext_Variable.ttf字體文件只有89kB，但是會產生一定范圍的權重。 可比的標準字體可能文件較小，但僅支持一種粗細和樣式。 其他選項需要其他文件，并相應地增加頁面權重。

But we can go even further. When we talked about font formats, we said that WOFF2 files are essentially TTF files with extra compression. WOFF2 files are smaller because they use custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.

但是我們可以走得更遠。 當我們談論字體格式時，我們說WOFF2文件本質上是具有額外壓縮功能的TTF文件。 WOFF2文件較小，因為它們使用自定義的預處理和壓縮算法來提供比其他格式約30％的文件大小減少。

Google offers a command line tool that will compress our file converting it to a woff2 format.

Google提供了一個命令行工具，該工具將壓縮我們的文件，將其轉換為woff2格式。

On the tool’s official GitHub page, we can find all the information about it. To install it on a Unix environment, we can use the following commands:

在該工具的官方GitHub頁面上 ，我們可以找到有關它的所有信息。 要將其安裝在Unix環境中，我們可以使用以下命令：

git clone --recursive https://github.com/google/woff2.git cd woff2 make clean all

After installing it, we can use it to compress our variable font file by using:

安裝后，我們可以使用它來壓縮可變字體文件，方法是：

woff2_compress AvenirNext_Variable.ttf

And we end up with a 42kb file, which halved the file size. To use this file, we just need to modify the sourced file and its format to accommodate this new file:

最后我們得到一個42kb的文件，該文件減少了一半。 要使用此文件，我們只需要修改源文件及其格式以適應這個新文件：

src: url('AvenirNext_Variable.woff2') format('woff2');

We now have a single 42Kb file which could be used for all the font weights on our page. The only downside to the woff2 format is that it’s not supported by Internet Explorer.

現在，我們有了一個42Kb的文件，該文件可用于頁面上的所有字體粗細。 woff2格式的唯一缺點是Internet Explorer不支持它。

為不同的瀏覽器提供不同的文件 (Serving Different Files for Different Browsers)

While some modern browsers already support variable fonts (Firefox developer editions have some level of support, Chrome 62, Chrome Android, Safari iOS, and Safari), there might be the case where we find one that doesn’t.

盡管某些現代瀏覽器已經支持可變字體(Firefox開發人員版本具有一定程度的支持，Chrome 62，Chrome Android，Safari iOS和Safari)，但在某些情況下，我們可能會發現不支持這種字體。

To get around this, we’ll need to either serve non-variable for those browsers or use an operating system font fallback.

為了解決這個問題，我們需要為這些瀏覽器提供非變量服務，或者使用操作系統字體回退。

Browsers that support variable fonts will download the file marked as format('woff2-variations'), while browsers that don’t will download the single style font marked as format('ttf'). This is possible because we can repeat references to variables in each rule. If the first fails, the second will be loaded. Just like the following:

支持可變字體的瀏覽器將下載標記為format('woff2-variations') ，而不支持可變字體的瀏覽器將下載標記為format('ttf')的單一樣式字體。 這是可能的，因為我們可以在每個規則中重復引用變量。 如果第一個失敗，將加載第二個。 就像下面這樣：

@font-face {font-family: 'Avenir Next Variable';src: url('AvenirNext_Variable.woff2') format('woff2-variations');src: url('AvenirNextLTPro-Bold.otf') format('truetype'); }html {font-family: 'Avenir Next Variable', sans-serif; }h1 {font-family: 'Avenir Next Variable';font-weight: 430; }h2 {font-family: 'Avenir Next Variable';font-weight: 630; }

The next example uses a different file format from the one we’re working with, but uses the same principle:

下一個示例使用與我們正在使用的文件格式不同的文件格式，但是使用相同的原理：

See the Pen Multiple fonts by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint ( @SitePoint )的Pen Multiple字體 。

If we check the result on a browser that supports variable fonts, like Chrome, we can see the following:

如果我們在支持可變字體的瀏覽器(例如Chrome)上檢查結果，則可以看到以下內容：

On a browser that doesn’t support variable fonts, like Firefox, the second font will be loaded and the result will look like this:

在不支持可變字體的瀏覽器(如Firefox)上，將加載第二種字體，結果將如下所示：

But if we still have to serve non-variable fonts to browsers that don’t support variable ones, don’t we lose all the performance we just gained with the variable font? If a browser can only load the standard font, we lose the performance and rendering benefits of variable fonts. In those situations, it may be preferable to fallback to a comparable operating system font rather than substitute it with many fixed fonts.

但是，如果我們仍然必須為不支持可變字體的瀏覽器提供非可變字體，那么我們是否會失去使用可變字體獲得的所有性能？ 如果瀏覽器只能加載標準字體，我們將失去可變字體的性能和呈現優勢。 在那種情況下，最好退回到可比的操作系統字體，而不是用許多固定字體代替。

結論 (Conclusion)

Despite being available for several years now, variable fonts are still in their infancy. Browser support is scarce and there are few fonts to choose from. However, the potential is enormous, and variable fonts will permit better performance while simplifying development. For example, SitePoint’s own front page currently loads eight font files with a total of 273kB. Variable fonts could reduce this dependency and cut page weight further.

盡管現在已經使用了幾年，但可變字體仍處于起步階段。 瀏覽器支持稀缺，幾乎沒有字體可供選擇。 但是，潛力是巨大的，可變字體將在簡化開發的同時提高性能。 例如，SitePoint自己的首頁當前加載八個字體文件，總大小為273kB。 可變字體可以減少這種依賴性并進一步減少頁面重量。

翻譯自: https://www.sitepoint.com/variable-fonts-introduction/

js字體溢出字體變小

總結

以上是生活随笔為你收集整理的js字体溢出字体变小_可变字体：它们是什么，以及如何使用它们的全部內容，希望文章能夠幫你解決所遇到的問題。

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