导入的字体不起作用

我一直在尝试几个小时才能使用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

导入的字体不起作用

回答

相关问题