導入的字體不起作用

我一直在嘗試幾個小時才能使用Titillium Web自定義字體，但沒有成功。下面是我的嘗試：導入的字體不起作用

添加以下行整體模板

`<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700" rel="stylesheet">`

添加在CSS

@font-face { 
    font-family: 'Titillium Web Bold'; 
    src: url('data/fonts/TWeb/titilliumweb-bold-webfont.woff2') format('woff2'), 
     url('data/fonts/TWeb/titilliumweb-bold-webfont.woff') format('woff'); 
     url("data/fonts/TWeb/titilliumweb-bold-webfont.ttf") format("truetype"), 
    url("data/fonts/TWeb/titilliumweb-bold-webfont.svg") format("svg"); 
    font-weight: normal; 
    font-style: normal; } 
@font-face { 
    font-family: 'Titillium Web BoldItalic'; 
    src: url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff2') format('woff2'), 
     url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff') format('woff'); 
     url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.ttf") format("truetype"), 
    url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.svg") format("svg"); 
    font-weight: normal; 
    font-style: normal; } 
@font-face { 
    font-family: 'Titillium Web Italic'; 
    src: url('data/fonts/TWeb/titilliumweb-italic-webfont.woff2') format('woff2'), 
     url('data/fonts/TWeb/titilliumweb-italic-webfont.woff') format('woff'); 
     url("data/fonts/TWeb/titilliumweb-italic-webfont.ttf") format("truetype"), 
    url("data/fonts/TWeb/titilliumweb-italic-webfont.svg") format("svg"); 
    font-weight: normal; 
    font-style: normal; } 
@font-face { 
    font-family: 'Titillium Web Light'; 
    src: url('data/fonts/TWeb/titilliumweb-light-webfont.woff2') format('woff2'), 
     url('data/fonts/TWeb/titilliumweb-light-webfont.woff') format('woff'); 
     url("data/fonts/TWeb/titilliumweb-light-webfont.ttf") format("truetype"), 
    url("data/fonts/TWeb/titilliumweb-light-webfont.svg") format("svg"); 
    font-weight: normal; 
    font-style: normal; } 
@font-face { 
    font-family: 'Titillium Web'; 
    src: url('data/fonts/TWeb/titilliumweb-regular-webfont.woff2') format('woff2'), 
     url('data/fonts/TWeb/titilliumweb-regular-webfont.woff') format('woff'); 
     url("data/fonts/TWeb/titilliumweb-regular-webfont.ttf") format("truetype"), 
    url("data/fonts/TWeb/titilliumweb-regular-webfont.svg") format("svg"); 
    font-weight: normal; 
    font-style: normal; } 
@font-face { 
    font-family: 'Titillium Web Semibold'; 
    src: url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff2') format('woff2'), 
     url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff') format('woff'); 
     url("data/fonts/TWeb/titilliumweb-semibold-webfont.ttf") format("truetype"), 
    url("data/fonts/TWeb/titilliumweb-semibold-webfont.svg") format("svg"); 
    font-weight: normal; 
    font-style: normal; }

上使用的字體下面的head部分html元素

a.random {font-family: 'Titillium Web';}或a.random {font-family: 'Titillium Web', sans-serif;}

沒有工作。有什麼想法？

感謝

來源

2017-09-13 Wyvh

你需要給一個HTML元素的'font'在你的CSS。現在，你所做的只是宣佈一個'font-face' – ifconfig

嘿。我曾嘗試在多個html元素上應用「font-family：'Titillium Web'」，但是我使用隨機舊字體替換了自定義字體，就好像它不工作或存在一樣。 – Wyvh

您沒有在您發佈的代碼中顯示它。你可以發佈該代碼嗎？ – ifconfig

@import url('https://fonts.googleapis.com/css family=Titillium+Web:300,400,400i,600,600i,700'); 
 
#f{ 
 
    font-family: 'Titillium Web', sans-serif; 
 
} 
 
#s{ 
 
    font-family: 'Titillium Web', sans-serif; 
 
    font-weight: 700; 
 
} 
 
#t{ 
 
    font-family: 'Titillium Web', sans-serif; 
 
    font-style:italic; 
 
    font-weight: 700; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<title>Title of the document</title> 
 
</head> 
 

 
<body> 
 
<p id="f">Sample</p> 
 
<p id="s">Another Sample</p> 
 
<p id="t">Last Sample</p> 
 
</body> 
 

 
</html>

來源

2017-09-13 01:21:33

您的代碼只能在Chrome上運行，直到我重新啓動Firefox。現在一切都很完美。謝謝！ – Wyvh

導入的字體不起作用

回答

相關問題