Question

我一直在尝试使用Titillium Web自定义字体几个小时但没有成功。这是我试过的：

在整个模板的head部分添加以下行

`<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; }

在html元素上使用字体

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

没有用。有什么想法吗？

由于

Answer 1

＆＃13;

 @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;
}

＆＃13;

<!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>

＆＃13;

导入的字体不起作用

1 个答案: