本地存儲的字體不被渲染

foo/index.html
stylesheets/normal.css
stylesheets/fonts/example.woff

foo/index.html包含：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="../stylesheets/normal.css" /> 
</head> 
<body> 
    <p>Lorem ipsum dolor sit amet.</p> 
</body> 
</html>

stylesheets/normal.css包含：

@font-face 
{ 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
font-stretch: normal; 
font-family: "Example"; 
src: url("fonts/example.woff"); 
} 

p 
{ 
color: blue; 
font-family: "Example"; 
}

當我在機器本地這些文件（因此不是一個網絡服務器）上的瀏覽器中加載foo/index.html，該段不與stylesheets/fonts/example.woff字體顯示;但它確實以藍色顯示。

如果我提出foo/index.html到index.html（所以它不是一個目錄）並更改爲stylesheets/normal.css從../stylesheets/normal.css樣式表路徑，段落，然後用正確的字體顯示。

這是怎麼發生的？我正在使用Firefox 52.0.2版本。

來源

2017-04-20 Belthian

嘗試使用到foo中的樣式表的絕對路徑/ index.html的'/樣式表/ normal.css' – chris

如果我設置樣式表的鏈接是絕對的（'/家庭/用戶名/項目/樣式表/正常.css'）在'foo/index.html'中，字體不顯示，但是藍色是。如果我在'index.html'中將樣式錶鏈接設置爲絕對（與'foo/index.html'相同，但不在目錄中），則字體顯示。 – Belthian

即時通訊相當確定這只是一個路徑問題，身份證擺弄你的路徑，直到它的工作。也許嘗試更改CSS文件中的網址。 – chris

如果你的意思是本地存儲的字體和本地服務器例如localhsot容器內工作，你需要把選擇的字體到您的服務器，或者您需要與本地主機服務器上的工作爲例。

爲了使代碼更可靠，包括字體文件類型的指示符。您可以使用適用於Internet Explorer的EOT（嵌入式OpenType）文件和其他OTF（OpenType）或TTF（TrueType）。（其他選項包括WOFF（網絡開放字體格式）和SVG（可縮放矢量圖形）。我用另一種可選效率的措施，我用src: local('fontname')得到瀏覽器來檢查字體的情況下，本地副本用戶已經擁有它。此外，您可以包括字體變體字體的重量。

如果你嘗試到桌面，例如，它沒有工作或沒有發生，這樣，你需要使用<style>@import url('https://fonts.googleapis.com/css?family=Arvo');</style>例如上工作。

富/索引。HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>STACKOVERFLOW | QUESTION 43509510</title> 
    <link rel="stylesheet" type="text/css" href="../stylesheets/normal.css"> 
</head> 
<body style="font-family: 'AceFont';"> 
    <h1 class="firsth1">This is my sample header</h1> 
    <p class="firstparagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</body> 
</html>

樣式表/ normal.css

/*The locally imported font*/ 
@font-face { 
    font-family: 'AceFont'; 
    src: url('fonts/AriosoNormal.eot'); 
    src: local('AceFont'), url('fonts/AriosoNormal.woff') format('woff'), url('fonts/AriosoNormal.ttf') format('truetype'); 
} 
/*End of the locally imported font*/ 

/*Content Sample*/ 
h1{ 
    font-family: 'AceFont'; 
} 
.firstparagraph{ 
    font-family: 'AceFont' !important; 
}

下載完整的文件在這裏https://www.dropbox.com/s/k30nr5z6yywzg9z/localfont.rar?dl=0。請嘗試將以下代碼放入您的服務器中。並再次嘗試將其放到服務器之外並查看其差異。

鏈接Google字體。

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>STACKOVERFLOW | QUESTION 43509510</title> 

    </head> 
    <body style="font-family: 'Arvo', serif;"> 
     <h1 >This is my sample header</h1> 
     <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </body> 
    </html> 

    <style type="text/css"> 
     @import url('https://fonts.googleapis.com/css?family=Arvo'); 
    </style>

來源

2017-04-21 01:37:13 Ace

我下載了您提供的RAR，並且發現了以下信息：當我打開'foo/index.html'時，我沒有看到您在樣式表中指定的字體。當我將'foo/index.html'複製到'index.html'（使它現在位於根目錄）並將樣式錶鏈接從'../ stylesheets/normal.css'改爲'stylesheets/normal.css'時，字體DID顯示。我相信這是一個瀏覽器錯誤。你使用的是什麼瀏覽器？ – Belthian

我在我的筆記本電腦中使用Opera，Mozilla和Google Chrome，它可以在任何人中使用。如果您打開RAR，您將獲得本地存儲的字體和代碼，這意味着存儲在本地主機中。例如，如果將提取的文件例如放在桌面中，然後單擊foo/index.html，則以下字體不起作用需要使用這種方式''。上面的以下答案已更新。 @Belthian – Ace

相對URL可能會非常棘手，但沒有斜槓開始是一樣的./，這意味着，從當前目錄開始。以兩個圓點和一個斜線開頭（../）將一個目錄向上移動到父項。以斜線開頭（/）將轉到根目錄。

我認爲你專注於樣式表，但你應該看在樣式表中的字體的URL。您的字體被引用到當前目錄，沒有斜槓：

url("fonts/example.woff")

爲了避免任何古怪，它可能是一個好主意，讓樣式表，即使樣式表本身是由一個相對的訪問絕對內部資產引用參考。

來源

2017-04-20 04:48:27 denmch

這是一個在託管網站的同一臺機器上訪問的網站。該網站不在線。要訪問網站，我訪問'file：/// home/username/project/foo/index.html'，其中字體未加載但樣式表爲。如果我將'/ home/username/project/foo/index.html'放置在'/ home/username/project/index.html'並更新文件，以使樣式表爲stylesheets/normal.css而不是'。。/ stylesheets/normal.css'，正確加載字體和樣式表。這個問題只發生在'index.html'位於'stylesheets'目錄的兄弟目錄中時。 – Belthian

本地存儲的字體不被渲染

回答

相關問題