如何確保我的所有用戶都擁有此字體系列？

我目前在我的網站上有一個頂部標題，它是頂部有一些文字的圖像，但文本是在Photoshop上添加到圖像上的。我現在需要做的文字動態的，所以我已刪除的文字爲圖像的一部分，將它通過對空白圖像的頂部：如何確保我的所有用戶都擁有此字體系列？

<span style="font-family: Bookman Old Style; 
font-size: 23px; 
position: absolute; 
left: 160px; 
top:20px"> 
My Site Top Header 
</span>

我能複製我的機器上完全相同的看法，但有沒有一個用戶沒有這個字體系列的問題，它會默認爲一些醜陋的字體呢？我知道我的所有用戶都在使用帶有最新Chrome/Firefox或IE 11的Windows PC。

來源

2016-02-13 leora

相關：[如何檢測網頁中使用哪種字體？]（http：// stackoverflow。com/questions/845/how-can-i-detect-which-font-was-in-a-web-page） –

您可以使用font-family規則聲明多個字體。如果列表中的第一個字體不可用，則下一個將用作後備。例如，如果您設置的font-family以下幾點：

font-family: 'Bookman Old Style', Arial, sans-serif;

瀏覽器將首先嚐試加載布克曼舊樣式的字體，如果沒有可用的，它會嘗試加載Arial字體，如果它的不可用它也會加載默認的sans-serif字體。

所以當用戶沒有安裝這個字體時，你可以選擇安裝相似的字體，這樣你的網頁看起來就不會那麼醜陋。

如果您擁有此字體（即免費或您已購買），則可以使用@font-face聲明將其包含在您的頁面中。例如：

@font-face { 
    src: url("http://example.com/your-font.woff2"); 
    font-family: 'Your Font'; 
} 
body { 
    font-family: 'Your Font', Arial, sans-serif; 
}

在這種情況下，瀏覽器將獲取從您指定的URL的字體，並將其應用到<body>。如果字體請求失敗，或者在字體被加載之前，瀏覽器將應用後備字體（即Arial）。

參見：

來源

2016-02-13 23:50:37

爲了讓用戶在他們機器的網站上看到您的字體，您必須在您的網站上包含您的字體。有多種方式可以做到這一點。

您可以執行以下操作使用字體-face規則：

<style> 
@font-face { 
    font-family: myFirstFont; // pick a font name to use in your file 
    src: url(sansation_light.woff); // relative font file location 
} 

div { 
    font-family: myFirstFont; 
} 
</style>

來源：http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

來源

2016-02-13 23:25:34

有沒有辦法保證用戶安裝了該字體。您可以將license the font作爲網頁字體，然後將網頁字體與網頁一起傳遞。隨着字體的發展，它並不是特別昂貴，所以這可能是一個合理的選擇。還有一個小問題，許多廣告攔截器也阻止網絡字體，所以如果你的用戶安裝了廣告攔截器，他們也不會獲得網絡字體。

底線是你應該指定一個非「醜陋」的後備字體，而不用擔心它。結合網頁字體，您可能會覆蓋幾乎所有的基礎。

來源

2016-02-13 23:35:26

我還沒有聽說過阻止字體的廣告攔截器。 –

如何確保我的所有用戶都擁有此字體系列？

回答

相關問題