wordpress字體

Recently, everybody seems to be talking about Lobster. Not the crustaceans from the ocean, but the Web Font. For those who haven’t heard of it, Lobster is a good example of a popular Google Font that is embedded into web pages.

最近，似乎每個人都在談論龍蝦。 不是來自海洋的甲殼類動物，而是Web字體。 對于那些還沒有聽說過的人，Lobster是嵌入到網頁中的流行Google字體的一個很好的例子。

Embedding fonts is not as new as you might think. Way back in 1998, CSS 2 introduced the @font-face rule. This, in theory, enabled designers to download any TrueType or PostScript font to a users computer for display in web pages. Unfortunately, at the time, only Internet Explorer 4 supported the rule. There was widespread fear that fonts that were expensive to licence would be pirated. Today, CSS 3 still doesn’t help with the piracy issue, but all web browsers support the rule. Screen resolutions have improved dramatically since that time too. So, if you haven’t embraced font embedding yet, now is the time to do so.

嵌入字體并不像您想象的那樣新。 早在1998年，CSS 2引入了@ font-face規則。 從理論上講，這使設計人員能夠將任何TrueType或PostScript字體下載到用戶計算機以顯示在網頁中。 不幸的是，當時只有Internet Explorer 4支持該規則。 人們普遍擔心，許可價格昂貴的字體會被盜版。 如今，CSS 3仍然無法解決盜版問題，但是所有Web瀏覽器都支持該規則。 自那時以來，屏幕分辨率也得到了顯著提高。 因此，如果您還沒有接受字體嵌入，那么現在該這樣做了。

當前的Web字體選項 (Current Web Font Options )

Before we talk about using web fonts in WordPress, let’s take a step back and look at fonts on the web in general.

在討論在WordPress中使用網絡字體之前，讓我們退后一步，大致了解一下網絡上的字體。

The most basic level of support for fonts comes from the operating system that the user is using. This may offer dozens of fonts for a desktop or laptop system to only three fonts on Android.

對字體的最基本支持來自用戶使用的操作系統。 這可能會為臺式機或筆記本電腦系統提供數十種字體，而在Android上只能提供三種字體。

Unfortunately, this remains a fairly pot luck system. We’re all aware of how poorly Helvetica looks on Windows-based machines when set at 16px and below, and that Arial can look less than fantastic on some older versions of OS X.

不幸的是，這仍然是一個很幸運的系統。 我們都知道Helvetica設置為16px及以下時，在基于Windows的計算機上看起來多么糟糕，并且Arial在某些舊版本的OS X上看起來并不完美。

Many of these discrepancies have come about because the original Apple Mac operating system was tied to old printing press technology of 72 points per inch. 10 point fonts were thus allocated 10 pixels on the display. At the time, Apple offered vertical (portrait) monitors that were the same size as standard American paper, and a direct one-to-one comparison could be made from the screen to a printed version. Microsoft on the other hand, chose 96 PPI on the basis people would be sitting an additional 1/3 of the distance away from a computer monitor than they would from a printed page. Thus everything was rendered 1/3 larger on a Windows-based computer.

由于最初的Apple Mac操作系統與每英寸 72 點的舊印刷機技術相關聯，因此出現了許多差異。 因此，在顯示器上為10點字體分配了10個像素。 當時，蘋果公司提供的立式(人像)顯示器尺寸與美國標準紙張相同，并且可以直接從屏幕到印刷版進行一對一的比較。 另一方面，Microsoft選擇96 PPI是因為人們與計算機顯示器的距離比打印頁面要多1/3。 因此，在基于Windows的計算機上，所有內容都放大了1/3。

Things have come a long way since the 1990s when these technologies emerged, and we now have a myriad of different screen sizes and resolutions to deal with. Yet, unless you specify a font, the users’ device and browser will still make the choice of font for you.

自1990年代出現這些技術以來，事情已經走了很長一段路，現在我們要處理許多不同的屏幕尺寸和分辨率。 但是，除非您指定字體，否則用戶的設備和瀏覽器仍將為您選擇字體。

Another issue is that some organisations limit the fonts on users computers. I once worked at an organisation whose computers only had Georgia and Verdana installed. This was so that letters and emails sent by employees could only be sent using a font that matched the corporate identity.

另一個問題是某些組織限制用戶計算機上的字體。 我曾經在一個組織中工作，該組織的計算機僅安裝了Georgia和Verdana。 這樣，員工發送的信件和電子郵件只能使用與公司標識匹配的字體發送。

充分利用內置字體 (Making the Most of Built-in Fonts)

Not withstanding the use of corporate fonts, most desktop and laptop computers – have fonts created for the Microsoft Core Fonts for the Web Project. This pack of fonts from 1996 included Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings. Although, versions of these fonts or their equivalents can be relied on as being on most desktops and laptops, the browser may not be relied on to display the fonts as you expect.

盡管使用公司字體，但大多數臺式機和便攜式計算機都具有為Web Project的Microsoft Core字體創建的字體 。 這套1996年以來的字體包包括Andale Mono，Arial，Arial Black，Comic Sans MS，Courier New，Georgia，Impact，Times New Roman，Trebuchet MS，Verdana和Webdings。 盡管可以在大多數臺式機和筆記本電腦上依賴這些字體的版本或等效形式，但是可能不依賴于瀏覽器來顯示您期望的字體。

Such limitations can be minimised by using a font stack. This sets a CSS rule for the browser to use one of a number of fonts. It always includes a catch all of either serif (having small embellishments on the end of the strokes) or sans-serif (without the embellishments). Thus we may have font-family: Cambria, ‘Hoefler Text’, ‘Liberation Serif’, Times, ‘Times New Roman’, serif. The browser should look through your ‘stack’ and display text using the first defined font it finds in your list that is present on the users’ computer. If it can’t find any of those, it uses a fallback font that is defined, in this example, as serif.

這樣的限制可以通過使用字體堆棧來最小化。 這為瀏覽器設置了CSS規則以使用多種字體之一。 它總是包括所有襯線(在筆畫末尾有小裝飾)或無襯線(無裝飾)的所有捕獲。 因此，我們可能有字體家族：Cambria，“ Hoefler Text”，“ Liberation Serif”，Times，“ Times New Roman”，serif。 瀏覽器應瀏覽您的“堆棧”，并使用在用戶計算機上存在的列表中找到的第一個定義的字體顯示文本。 如果找不到這些字體，則使用定義為襯線的后備字體。

The aim is to pick a range of fonts that render well on a range of browsers at a range of different resolutions and zoom levels.

目的是選擇一系列字體，這些字體可以在各種分辨率和縮放級別的瀏覽器上很好地呈現。

There is an excellent discussion of font stacks by Canadian designer Amrinder Sandhu here.

加拿大設計師Amrinder Sandhu 在這里對字體堆棧進行了精彩的討論。

Unfortunately, using a font stack doesn’t help if your viewers are using handheld devices. Android devices use Droid Sans, Droid Serif, and Droid Sans Mono, whilst Apple iOS devices use Helvetica Neue that has a wide range of styles and weights.

不幸的是，如果觀眾使用的是手持設備，則使用字體棧無濟于事。 Android設備使用Droid Sans，Droid Serif和Droid Sans Mono，而Apple iOS設備使用具有多種樣式和權重的Helvetica Neue。

You would probably like to have more control over how your WordPress pages look than relying on the built-in fonts of a multitude of operating systems and versions. We can overcome this by embedding fonts.

您可能希望對WordPress頁面的外觀進行更多控制，而不是依賴于多種操作系統和版本的內置字體。 我們可以通過嵌入字體來克服這一問題。

Now, let’s look at the types of web fonts available.

現在，讓我們看一下可用的網絡字體類型。

免費字體 (Free Fonts)

The vast majority of available fonts are licensed in some way. When you buy a computer, tablet, or mobile phone that has an operating system installed, part of the cost is the licensing of the fonts. However, there are a number of ways to use a wide range of free embedded fonts.

絕大多數可用字體都以某種方式獲得許可。 當您購買裝有操作系統的計算機，平板電腦或移動電話時，部分費用是字體許可。 但是，有多種方法可以使用各種免費的嵌入式字體。

Embedded fonts are character sets that are downloaded to a users’ computer from a third party platform for the time that the page is active, and lost when the page is closed. That allows the serving company to retain control of the font, but allows you to display the font with out the need to pay to use it. There are a large number of companies serving fonts. The most well known are:

嵌入式字體是在頁面處于活動狀態時從第三方平臺下載到用戶計算機的字符集，在關閉頁面時會丟失。 這樣，服務公司可以保留對字體的控制權，但無需花費任何使用即可顯示字體。 有大量的公司提供字體。 最著名的是：

Google Fonts, Probably the most popular free font service, the platform offers over 700 well-designed fonts, including Lobster.

Google字體可能是最受歡迎的免費字體服務，該平臺提供了700多種精心設計的字體，包括Lobster。

Adobe also offers fonts via their Edge Web Fonts platform. This interfaces directly with the Typekit service (see below), but filters the paid fonts leaving free Open Fonts.

Adobe還通過其Edge Web Fonts平臺提供字體。 它直接與Typekit服務連接(請參閱下文)，但過濾付費字體，留下免費的開放字體。

Another platform worth considering is the Open Font Library. This has over 600 fonts.

另一個值得考慮的平臺是開放字體庫 。 它具有600多種字體。

All the fonts on these platforms, and a number of others, use the Open Font Licence. The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.

這些平臺上的所有字體以及許多其他字體都使用“開放字體許可證”。 開放字體許可(OFL)的目標是刺激全球協作字體項目的發展，支持學術界和語言社區的字體創建工作，并提供一個自由開放的框架，在其中可以共享和改進字體和其他人。

The advantage of Open Fonts is that they are freely available to use on your websites without the need to pay annual licence fees. The disadvantage is that your chosen font may not have a full range of styles and weights.

開放字體的優點是可以免費在您的網站上使用它們，而無需支付年度許可費。 缺點是您選擇的字體可能沒有完整的樣式和粗細。

付費字體 (Paid Fonts)

Despite the prevalence of free fonts, there are still a large number of font foundries offering premium fonts. For example, the Type Foundries Archive lists close to 300 creators and sites offering premium typefaces, although not all of them are offered for embedding into web pages.

盡管免費字體盛行，但仍有大量提供優質字體的字體代工廠。 例如， Type Foundries存檔列出了將近300個提供優質字體的創作者和網站，盡管并非全部都可以嵌入網頁。

Of the organizations offering premium fonts for web use, the German based Font Shop is perhaps the most popular marketplace for paid fonts. There are high quality fonts, as well as unusual sets of glyphs such as Ulrike Rausch’s set of kitchen fruit and vegetables, forks and knives, pots and home appliances, LiebeCook.

在提供用于網絡使用的高級字體的組織中，德國的字體商店可能是最受歡迎的付費字體市場。 這里有高質量的字體，以及不尋常的標志符號，例如Ulrike Rausch的廚房水果和蔬菜，叉子和刀子，鍋和家用電器LiebeCook的組合。

If you have an Adobe Creative Cloud account, you automatically get access to the Adobe’s Typekit service. Typekit offers over 450 fonts. The catch is that whilst the licence allows for you to use the fonts in print publications and on your personal non-commercial websites, if you are working for a client you may only use web fonts if you have an Adobe business account. Adobe suggests that you set up an account for the client during development and hand that over to them. This has the disadvantage that if the client fails to pay their account the site will revert to the fallback fonts in your defined font stack, i.e. the system fonts.

如果您擁有Adobe Creative Cloud帳戶，則可以自動訪問Adobe的Typekit服務。 Typekit提供超過450種字體。 問題是，盡管許可證允許您在印刷出版物和個人非商業網站上使用字體，但如果您是為客戶工作，則只有擁有Adobe商業帳戶的人才能使用Web字體。 Adobe建議您在開發期間為客戶設置一個帳戶，然后將其移交給他們。 這樣做的缺點是，如果客戶無法付款，則站點將還原為您定義的字體堆棧中的后備字體，即系統字體。

在WordPress頁面和帖子中獲取所需的字體 (Getting the Font You Want in Your WordPress Pages and Posts)

There are a number of plugins that let you use web fonts on your WordPress website, with Easy Google Fonts being one of the most popular. I’m not going focus on plugins in this article, but rather look at how to do this manually ourselves, by making changes to our theme. Additionally, some themes on the market come with various web font options.

有許多插件可讓您在WordPress網站上使用網絡字體，其中Easy Google Fonts是最受歡迎的插件之一。 在本文中，我不會重點討論插件，而是研究如何通過更改主題來自己手動執行此操作。 此外，市場上的某些主題帶有各種Web字體選項。

The actual code will vary from service to service. I’ll outline the methods for Google Fonts, and Adobe Edge/Typekit. Other services work in similar ways. First though, remember to backup your site (or ideally work on a separate development copy), and work on copies of the files just in case something goes wrong. Styling changes should be made using Child Themes so that your changes are not overwritten each time the theme is updated.

實際代碼因服務而異。 我將概述Google字體和Adobe Edge / Typekit的方法。 其他服務以類似方式工作。 不過，首先，請記住備份您的站點(或者最好是在單獨的開發副本上工作)，并在文件副本上工作，以防萬一出問題。 應使用“子主題”進行樣式更改，以免每次更新主題時都覆蓋您的更改。

Google字體 (Google Fonts)

There are three methods (aside from plugins) for displaying external fonts on your WordPress pages and posts with Google Fonts: @import, link, and JavaScript.

除插件外，還有三種方法可在WordPress頁面和帶有Google字體的帖子上顯示外部字體： @import ，鏈接和JavaScript。

Once you have selected your font, click the Quick-use button. If offered check the required weights and styles, and the character set(s).

選擇字體后，單擊“快速使用”按鈕。 如果提供，請檢查所需的粗細和樣式以及字符集。

Next, you will need to choose the method of embedding. The easiest method is to add the @import rule to style.css file of the theme you wish to modify. It doesn’t seem to matter where you place the code within the style.css rules. However, @import will block any other content from downloading until it has finished its task. Therefore, if you’re planning on using this method for multiple fonts you should combine the requests into one @import rule.

接下來，您將需要選擇嵌入方法。 最簡單的方法是將@import規則添加到要修改的主題的style.css文件中。 將代碼放置在style.css規則中的位置似乎并不重要。 但是，@ @import將阻止其他任何內容下載，直到完成其任務為止。 因此，如果您打算對多種字體使用此方法，則應將請求合并為一個@import規則。

The second method is equally simple, it uses the link method and the code is contained on the Standard tab. This time the code is placed into the header.php file. Place the code at the top of the file. You can then add the name of the font to your font stack. Remember to add it as the first font, followed by preferred system fonts, and the fallback font style.

第二種方法同樣簡單，它使用鏈接方法，并且代碼包含在“標準”選項卡上。 這次將代碼放入header.php文件中。 將代碼放在文件頂部。 然后，您可以將字體名稱添加到字體堆棧中。 請記住，將其添加為第一個字體，然后添加首選系統字體和后備字體樣式。

Here it is worth noting that the Google Web Fonts blog states that if a script tag is present before the @font-face declaration, then Internet Explorer won’t display any page content until the font files have finished downloading. Therefore, if the files fail to download, the Internet Explorer user maybe left with a blank or partially loaded page. So place the @font-face declaration as early as possible in the file.

在此值得注意的是，Google Web Fonts博客指出，如果在@font-face聲明之前存在腳本標簽，則Internet Explorer在字體文件下載完成之前不會顯示任何頁面內容。 因此，如果文件下載失敗，則Internet Explorer用戶可能會留下空白或部分加載的頁面。 因此，請將@font-face聲明盡早放入文件中。

A further method is to enqeue the font in the functions.php file. The function shown below will load the required font styles and weights.

另一種方法是在functions.php文件中獲取字體。 下面顯示的功能將加載所需的字體樣式和粗細。

Finally, you can load the font using JavaScript. There are arguments for and against using JavaScript, but the number of users with JavaScript turned off is very small. The code is added in the header.php of the child theme, where it is placed between the <head> and </head> tags. Again Google suggest that it should be the first element, this way the fonts will load whilst the other parts of the page load and this should avoid the ‘flash of unstyled text’.

最后，您可以使用JavaScript加載字體。 有支持和反對使用JavaScript的論點，但是關閉JavaScript的用戶數量非常少。 該代碼被添加到子主題的header.php ，該代碼位于<head>和</ head>標記之間。 再次，谷歌建議它應該是第一個元素，這樣字體將在頁面的其他部分加載時加載，這應該避免“未樣式化文本的閃爍”。

Adobe Edge Web字體和Typekit (Adobe Edge Web Fonts and Typekit)

Adding Adobe Typekit fonts to WordPress is a little less straightforward. Whilst you can use similar methods to those for Google Fonts, less experienced developers can use the Typekit Fonts for WordPress plugin. Once installed the plugin will appear in your Settings menu. Again, remember to backup WordPress before making these modifications.

在WordPress中添加Adobe Typekit字體要簡單一些。 雖然您可以使用與Google字體相似的方法，但是經驗不足的開發人員可以使用Typekit字體用于WordPress插件。 安裝后，該插件將顯示在“設置”菜單中。 同樣，請記住在進行這些修改之前備份WordPress。

To use Typekit, login to your account via the Creative Cloud app. Once you’ve selected a font, Create a Kit. Give your kit a name, then add the domain name of the site you are using the font on. Once you’ve entered your site details, you’ll be given a piece of JavaScript. Copy and save this in a text file using a plain text editor such as TextEdit or Notepad.

要使用Typekit，請通過Creative Cloud應用程序登錄到您的帳戶。 選擇字體后，創建一個工具包。 給您的工具包起一個名字，然后添加您正在使用該字體的網站的域名。 輸入網站詳細信息后，您將獲得一段JavaScript。 使用純文本編輯器(例如TextEdit或Notepad)將其復制并保存到文本文件中。

The next step is to select your font, add it to your site kit, and publish it. Add any further fonts you wish to use and publish them.

下一步是選擇字體，將其添加到網站工具包中，然后進行發布。 添加您想要使用的其他字體并進行發布。

After the kit is published, go to the Typekit Fonts for WordPress plugin.

該工具包發布后，請轉到WordPress插件的Typekit字體。

Add the piece of code that you saved in the text file.

添加您保存在文本文件中的代碼。

Add the CSS code selectors as required. In the example, I’ve added post-title to show as H1 text (WordPress Page and Post titles are H1 text.). I’ve also added sub-title that is the H2 subheading in the main body text. Note that prior to naming your selectors, it is a good idea to check that the names are not already in use by your theme. You can do this by inspecting the elements using the Developer Tools in your browser. Don’t forget to refresh your screen following each change you make, it can take a few minutes for the font to become available on your site.

根據需要添加CSS代碼選擇器。 在示例中，我添加了帖子標題以顯示為H1文本(WordPress頁面和帖子標題為H1文本。)。 我還在主體文本中添加了副標題，即H2副標題。 請注意，在命名選擇器之前，最好檢查一下主題是否使用了名稱。 您可以通過使用瀏覽器中的開發人員工具檢查元素來做到這一點。 進行每次更改后，請不要忘記刷新屏幕，字體可能需要幾分鐘才能在您的站點上可用。

Finally, it’s also recommended that you always specify both the font-weight and font-style properties each time you use a font. Again, this helps you maintain control of the display of the font over the myriad of possible platforms.

最后，還建議您每次使用字體時都同時指定font-weight和font-style屬性。 同樣，這可以幫助您在眾多可能的平臺上保持對字體顯示的控制。

結論 (Conclusion)

Adding fonts to your site is an accepted method of producing enticing sites. It can also be a great way to make a commonly used WordPress theme stand out from all the others.

向站點添加字體是一種誘人的站點生成方法。 這也是使常用的WordPress主題與其他主題脫穎而出的好方法。

However, don’t be tempted to add a huge number of fonts just because you can – one of my first tasks in Visual Communications in high school was to count the number of fonts on cereal packets (there was over 25 fonts on a Corn Flakes packet!). Less is often more with fonts, and limiting yourself to two or three designs is usually the best practice, from not only a loading speed perspective, but also a visual design point of view.

但是，不要僅僅因為您就可以嘗試添加大量字體-高中視覺通信中我的首要任務之一就是計算谷物包裝上的字體數量(玉米片上有25種以上的字體)包！)。 字體的減少往往更多，并且從加載速度的角度以及視覺設計的角度來看，將自己限制為兩種或三種設計通常是最佳實踐。

Google offers a font-pairing feature in the pop out, the button is next to the Quick Use button to help you get started. Graphic design is a craft that takes years to master, but embedding a couple of good fonts will ensure that the design you choose will be seen by all your users.

Google在彈出窗口中提供了字體配對功能，該按鈕位于“快速使用”按鈕旁邊，可幫助您入門。 圖形設計是一種需要花費數年才能掌握的技術，但是嵌入一些好的字體將確保您選擇的設計將被所有用戶看到。

翻譯自: https://www.sitepoint.com/how-to-use-web-fonts-in-wordpress/

wordpress字體

總結

以上是生活随笔為你收集整理的wordpress字体_如何在WordPress中使用网络字体的全部內容，希望文章能夠幫你解決所遇到的問題。

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