自定義本地存儲的字體（開發機器和服務器端）：CSS？

我正在嘗試使用Abadi MT Condensed Extra Bold字體。不幸的是，我找不到任何通過API提供的CDN。我用來拉入字體的css代碼有問題嗎？我知道確定樣式表正在被加載。

語境

，當我有它在我的系統的字體書100％打開，而不是在禁用/刪除的字體作品 - 但我明白，這是不切合實際的期望，每一個用戶打算擁有該字體。所以鑑於此，它不適用於iPhone或Android設備。

我最好在CDN中找到一種字體，或者是否可以做到這一點？謝謝！

代碼：

****** fonts.css ********

@font-face { 
    font-family: 'serif'; 
    src: url('../fonts/Abadi MT Condensed Extra Bold.eot'); 
    src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

***** layout.pug ****** *

doctype html 
html(lang='en') 
    head 
    meta(charset='utf-8') 
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') 
    meta(name='description', content='') 
    meta(name='author', content='') 
    title #{title} 

    //jquery 
    script(src='https://code.jquery.com/jquery-2.2.4.min.js') 
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js') 

    //shopify 
    script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js') 

    //custom cart 
    script(src="scripts/cart.js") 

    //popper 
    script(src='./vendor/popper/popper.min.js') 

    //bootstrap 
    script(src='./vendor/bootstrap/js/bootstrap.min.js') 

    //Favicons 
    link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png') 
    ...... 
    ...... 

    // Bootstrap core CSS 
    link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet') 

    //Gliphicons had to be pulled in separately 
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet') 

    // Custom fonts for this template 
    link(href='./stylesheets/fonts.css', rel='stylesheet') 

    // Custom styles for this template 
    link(href='./stylesheets/template.css', rel='stylesheet')

嘗試的解決方案

我已經人已準備好嘗試解決方案，如this。此外我的CSS代碼用於不具有整個fonts.css文件。

來源

2017-08-23 Lucas Crostarosa

我知道它的東西，你肯定做，但如果字體不加載，通常是因爲字體 - 面對宣言有一個錯誤的道路給他們。如果您確定情況並非如此，我們需要一個到演示網站的實時鏈接，以檢查它是否有所不同，但我很確定問題是這些字體的路徑... –

爲什麼你聲明'src'兩次？使用這種語法，看看它是否適用於你https://jsfiddle.net/m6v7xrw3/ –

@Ihazkode這是一個古老的做法，[防彈字體的方法]（https://www.paulirish.com/2009/ bulletproof-font-face-implementation-syntax /）...通常我使用類似的東西，但我不喜歡'local'規則，這是我多年前停止使用的東西... –

我能夠弄清楚這一點，發佈給任何其他人有相同的問題。

我發現this blob幫助

所以現在我的最終代碼是

@font-face { 
    font-family: AbadiBold; 
    src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'); 
    src: 
      url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"), 
      url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"), 
      url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg"); 

    font-weight: 400; 
    font-style: normal; 
} 

* { 
    font-family: AbadiBold 
} 

h1, h2, h3, h4, h5, h6, .text-heading { 
    font-family: AbadiBold 
}

來源

2017-08-27 20:41:17

自定義本地存儲的字體（開發機器和服務器端）：CSS？

回答

相關問題