我在项目中使用GoogleFonts,由于某种原因,如果不使用'embed'系统,就无法导入字体。
例如,如果要导入Titan One
字体,可以使用:
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap'); font-family: 'Titan One', cursive;
此网址实际上是指声明字体的css文件:
/* latin-ext */ @font-face { font-family: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap; src: local('Titan One'), local('TitanOne'), url(https://fonts.gstatic.com/s/titanone/v7/mFTzWbsGxbbS_J5cQcjCmjgm-khyk-RW.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap; src: local('Titan One'), local('TitanOne'), url(https://fonts.gstatic.com/s/titanone/v7/mFTzWbsGxbbS_J5cQcjClDgm-khykw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
所以我决定跳过
@import
步骤,直接从其静态网址(此处为https://fonts.gstatic.com/s/titanone/v7/mFTzWbsGxbbS_J5cQcjCmjgm-khyk-RW.woff2)导入字体:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'Titan One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/titanone/v7/mFTzWbsGxbbS_J5cQcjCmjgm-khyk-RW.woff2);
}
h1 {
font-family: 'Titan One';
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
</body>
</html>
但是如您所见,字体不适用于我的标题。您知道错误在哪里吗?
我在项目中使用GoogleFonts,由于某种原因,如果不使用'embed'系统,我将无法导入字体。例如,如果您要导入“泰坦一号”字体,则可以使用:@import url(...
[您需要考虑latin
文件而不是latin-ext
,但我建议您复制整个Google文件以确保其正常工作,因为unicode-range
很重要