WP FOFT Loader – WordPress plugin 外掛推薦下載

點擊下載

WP FOFT Loader

插件描述

此插件使用數據URI 實現並自動化 Zach Leatherman的Critical FOFT。

致謝

此插件基於 Hugh Lashbrooke的Starter Plugin ,這是一個強大的GPL許可代碼模板,用於創建符合標準的WordPress插件。

生成和上傳字體文件

為每個Web字體上傳兩個文件:WOFF文件和WOFF2文件。我們建議您使用 Font Squirrel的Webfont Generator 生成文件。強製字體松鼠設置為:

 選擇“專家”字體格式:“WOFF”“WOFF2”高級選項:“字體名稱後綴”= -webfont  

詳細推薦設置,請參閱插件上傳選項屏幕。

文件名必須遵循正確的命名約定: $ family SC- $ variant -webfont- $ filetype

$ family 沒有樣式的字體系列基本名稱。不區分大小寫。可能包含字母,數字和下劃線,但不包含連字符或空格。 SC 小型大寫標識符。 可選。僅當它是小型大寫字母時才附加到$ family。 區分大小寫 $ variant 字體樣式。可以是重量,風格或兩者的組合。 區分大小寫 -webfont- 強制性後綴。附加到$ variant。 $ filetype 文件類型,即“woff”或“woff2”。

示例:對於Times New Roman的粗體斜體樣式,將文件重命名為timenewroman-boldItalic-webfont.woff和timesnewroman-boldItalic-webfont.woff2。適用於小型帽子款式milies,將SC(區分大小寫)附加到姓氏,例如playfairdisplaySC-bold-webfont.woff。

允許的權重和样式及其CSS映射為:

thin |髮際線(映射到100)
extraLight | ultraLight(映射到200)
燈(映射到300)
常規| normal(映射到400)
medium(映射到500)
demiBold | semiBold(映射到600)
粗體(映射到700)
extraBold | ultraBold(映射到800)
黑色|重(映射到900)
thinItalic | hairlineItalic(映射到100)
extraLightItalic | ultraLightItalic(映射到200)
lightItalic(映射到300)
斜體(映射到400)
mediumItalic(映射到500)
demiBoldItalic | semiBoldItalic(映射到600)
boldItalic(映射到700)
extraBoldItalic | ultraBoldItalic(映射到800)
blackItalic | heavyItalic(映射到900)

配置

優化

在頁面完全加載之前加載小的子集化字體文件以提高性能。此設置適用於下一個選項卡中的Base64設置。所有字段都是可選字段,但如果您填寫其中任何字段,則還應填寫相應的Base64設置字段。

在下面輸入Base64子集字體的名稱。 只需要姓氏,而不是風格。 名稱不區分大小寫。允許使用連字符和下劃線,但空格不允許。

正確:

  playfairdisplay(全部小寫)playfair-display(允許連字符和下劃線)PlayfairDisplay(允許混合大小寫) 

不正確:

  playfairdisplay-bold(僅使用姓氏;省略樣式,即“粗體”)播放場地顯示(禁止空格)Playfair Display(禁止空格) ) 

Base64

此setting inlines文檔頭中的Base64編碼字體,以提高字體加載速度。此設置適用於上一個選項卡中的優化設置。所有字段都是可選字段,但如果您填寫其中任何字段,則還應填寫相應的“優化設置”字段。

字體必須進行子集化並編碼為Base64。要對字體進行子集化和編碼,我們建議您使用Font Squirrel的Webfont Generator。強製字體Squirrel設置為:

 選擇“專家”字體格式:NoneFix缺少字形:無子集:“自定義子集”與Unicode範圍0030-0039,0041-005A,0061-007A保留其他所有內容未選中的OpenType功能:NoneOpenType展平:NoneCSS:“Base64 Encode” 

有關詳細的推薦設置,請參閱插件Base64選項屏幕。生成器將生成一個如下所示的文件:

  @ font-face {font-family:Merriweather; src:url(data:application / font-woff; charset = utf-8; base64,d09GRgABAAAAAB4UABAAAAAAMpAAA ...)格式(“woff”); }  

將部件複製並粘貼到’ src:url(數據:application / font-woff; charset = utf-8; base64,‘和’)格式(“woff”); '進入下面的相應字段。在這個例子中,' d09GRgABAAAAAB4UABAAAAAAMpAAA … '。

CSS

@import規則由此插件自動處理。您可以在文檔

< head>中手動內聯與字體相關的CSS。 這裡。此處僅放置與font-family,font-weight,font-style和font-variation屬性相關的規則。

插件CSS

該插件默認加載一些CSS。您可以從此屏幕禁用它。

字體顯示

該插件使用

font-display:默認情況下交換。您可以在此處覆蓋 font-display 屬性。

CSS Stage 1

放置在此字段中的聲明將加載Base64子集作為佔位符,同時加載外部字體。

僅使用系列名稱後跟子集(不區分大小寫)系列名稱必須與您在“優化”屏幕上輸入的名稱相匹配。從字體名稱中刪除權重和样式所有聲明必須以fonts-stage-1 classSee開頭文檔屏幕,用於查看此插件默認加載的Stage 1 CSS。

不正確:

 .nav-primary {//缺少前綴:.fonts-stage-1 font-family:latoSubset,sans-serif;}。fonts-stage-1#footer- primary {font-family:lato-boldSubset,san-serif; //不包括重量或風格} .fonts-stage-1#footer-secondary {font-family:lato,san-serif; //缺少“子集”後綴} .fonts-stage-1 div.callout {font-family:lato-Subset,san-serif; font-size:1rem; //“font-family”,“font-weight”,“font-style”,//和“font-variant”規則}   

正確:

 .fonts-stage-1 .nav-primary {font-family:latoSubset,sans-serif;}。fonts-stage-1 dl.glossary {font-family:latosubset,san-serif; //後綴不區分大小寫}   

CSS Stage 2

僅使用系列名稱系列名稱必須與您在“上傳”屏幕上上傳的字體的文件名匹配。忽略權重和样式從字體nameAll聲明必須從fonts-stage-2類開始為了獲得最佳性能,請在將CSS粘貼到表單之前縮小CSS。請參閱Documentation屏幕以查看此插件默認加載的Stage 2 CSS。

不正確:

 tbody {//缺少類:。字體 - 階段-2字體系列:lato,Corbel,“Lucida Grande”,sans-serif; font-weight:400; font-style:normal;} .fonts-stage-2 span.bolder {font-family:lato-bold,Corbel,“Lucida Grande”,sans-serif; //不要在字體名稱中包含樣式。 //更好的是,完全省略聲明。 font-weight:700;}。fonts-stage-2 div.callout {font-family:lato-regular,Corbel,“Lucida Grande”,san-serif; font-size:1rem; //“font-family”,“font-weight”,“font-style”,//和“font-variant”規則}   

正確:

 .fonts-stage-2 div.callout {font-family:lato,Corbel,“Lucida Grande”,sans-serif; font-weight:400; font-style:normal;}。fonts-stage-2 div.callout {//無需重新聲明font-family  - 所有權重映射到單個系列名稱font-weight:700; //這將使用lato-bold字體}   

為了獲得最佳性能,請

縮小CSS ,然後將其粘貼到表單中。

字體堆棧

如果未加載自定義字體,請更改默認字體回退。請勿在此處包含默認自定義字體的名稱。

進一步的文檔

請參閱“文檔”屏幕以查看此插件默認加載的CSS以及查看視頻教程。

翻譯

英語:默認語言,總是包括荷蘭語,荷蘭語(nl_NL)作者:Augus van Gils @augusgils

即將翻譯:

西班牙語(由Daniel N LiraSpanish(es_MX)作者:Nilo Vélez@ nilovelez

屏幕截圖

上傳屏幕:在此處上傳您的自定義網絡字體
優化屏幕:告訴fontobserver.js為階段1加載哪些字體
Base64屏幕:內聯子集階段的Base64數據URI 1種字體
CSS屏幕:所有與字體相關的CSS都在這裡所以它可以內聯。
字體堆棧屏幕:設置默認字體堆棧
文檔(1):有關插件默認加載的CSS的信息
文檔(2):視頻教程

安裝

使用WORDPRESS DASHBOARD

導航到插件儀表板中的“添加新”搜索“WP FOFT Loader”單擊“立即安裝”激活插件儀表板上的插件Go Settings – > WP FOFT Loader,上傳字體並配置設置。

上傳到WORDPRESS DASHBOARD

導航到插件儀表板中的“添加新內容”導航到“上傳”區域從計算機中選擇wp-foft-loader.zip單擊“立即安裝”在插件儀表板中激活插件進入設置 – &gt ; WP FOFT Loader,上傳字體並配置設置。

使用FTP

點擊下載WP FOFT Loader ZIP文件將WP FOFT Loader ZIP文件提取到您的計算機上將“wp-foft-loader”目錄加載到

/ wp-content / plugins / 目錄激活插件的儀表板Go Settings中的插件 - > WP FOFT Loader,上傳字體並配置設置。 從GITHUB

下載點擊下載插件通過https://github.com/seezee/WP-FOFT-LoaderFollow使用FTP的方向

FAQ

插件是什麼?

此插件使用數據URI

實現並自動化 Zach Leatherman的人造文本關鍵閃存(FOFT)。這種技術是字體速度加載和積極用戶體驗之間的最佳折衷。

PROS

關鍵FOFT方法的所有現有優點。消除不可見文本(FOIT)的Flash並大大減少無格式文本的Flash(FOUT)對於羅馬fon噸。對於在第二階段中加載的其他字符以及加載其他權重和样式時,將發生小的重排,但它將產生小得多的影響。

CONS

Critical FOFT方法的所有現有缺點。小內聯數據URI將略微阻止初始渲染。我們正在以高度減少的FOUT進行交易。自己託管:必填。我如何幫助改進這個插件? 我很想听聽你的反饋。特別是,請告訴我您配置插件的經驗。說明是否清楚?我需要改寫嗎?我遺漏了一些關鍵的東西嗎?你得到漂移。

我想做更多

我正在尋找合作者來改進代碼。如果您是一位經驗豐富的WordPress程序員,請打我!

我想做更多

隨時向我的

Paypal帳戶發送捐款。如果你在城裡,或者給我買啤酒。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *