Css中用Google Fonts ，国内使用方法

2023-10-15 12:09:34

最近公司让我改字体样式，准备用谷歌的某种字体。因为某些原因，使用谷歌字体的网站加载就会非常慢。
我找了一下资料，发现好多方法都写的不全，因此我花费了几个小时时间测试了下。
我发现最简单使用的方法，还是本地加载字体包（推荐）

方法步骤

一、访问谷歌字体的url链接

//访问链接
https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&display=swap

访问后结果

把它存为local_google_fonts.css

/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chakrapetch/v4/cIflMapbsEk7TDLdtEz1BwkebIl1U5_F7AY.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chakrapetch/v4/cIflMapbsEk7TDLdtEz1BwkebIl1SJ_F7AY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chakrapetch/v4/cIflMapbsEk7TDLdtEz1BwkebIl1SZ_F7AY.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: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chakrapetch/v4/cIflMapbsEk7TDLdtEz1BwkebIl1R5_F.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;
}

二、访问上面代码里的src的url链接（会下载文字文件）

三、把local_google_fonts.css文件中的src中的url换成绝对路径

四、引入和使用

两种引入方式：一种是link引入，一种是@import引入

使用方法：直接设置style样式 font-family: Chakra Petch

Chakra Petch为local_google_fonts.css文件中@font-face {
font-family: ‘Chakra Petch’; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/local_google_fonts.css">
    <style>
        /* @import "./css/local_google_fonts.css"; */
    </style>
</head>
<body>
    <div>
        <p style="font-family: Chakra Petch;">safsakjfhksa</p>
        <p style="font-family: Chakra Petch;">的萨科技发货款撒娇浩丰科技安徽人口</p>
        <p style="font-family: Chakra Petch;">14214152152515</p>
        <p style="font-family: Chakra Petch;">100000000000000152515</p>
    </div>
</body>

</html>

五、效果展示

看完记的一键三连٩(๑•̀ω•́๑)۶

码农公寓