CSS为网站的中文和英文使用不同的字体

前言

最近我在搭建个人网站，在这个过程中遇到很多的问题，不过chatGPT3.5帮助了很多，这是我使用的咒语：

我正在搭建一个个人网站，使用python Flask框架，CSS采用Bootstrap5，数据库采用SQLite，并且使用Flask-SQLAlchemy扩展来访问SQLite数据库，我打算将其部署到一块树莓派4B上面。我打算使用这个网站发布一些自己写的文章，包括技术类的，还有生活类的，还有自己的思考，文章使用markdown及其扩展语法，在接下来的对话中请你牢记这些信息。

我在学校的时候之前一直在使用Jetbrain的IDE（Pycharm, CLion），因为可以白嫖学生的License，现在待业在家找工作，就想做几个项目来丰富一下简历，于是就想搭建一个个人网站出来，之前虽然也是用过Hexo搭建过个人博客，但是总感觉不太舒服，这次做一个大的，而且很多事情可以询问chatGPT3.5

问题描述

我非常喜欢Jetbrain IDE的字体，看上去非常的舒服，于是决定给自己的网站的英文符号也弄上去，于是下载了他们的这个字体，这个字体是不包含中文的，只有英文和数字和一些其他的符号。于是我想到为自己的网站定制中文和英文，在使用macos的时候，我觉得苹方简体，这款字也很不错。于是萌生了这样子的想法，对我网站的中文使用苹方简体，英文呢使用JetbrainMono，也就是Jetbrain IDE使用的字体。

解决方案

我问了chatGPT3.5，他给了我一个大体的框架，甚至一些代码，虽然我每次问他，答案都会有些不一样。首先就是建立一个font的文件夹，并且在这个文件夹中建立一个font.css文件，这个font文件夹需要建立在你放资源的地方，在我这里就是static文件夹。

这是我项目的static文件夹

请添加图片描述

下面是我的font.css代码

/* 2个URL让浏览器选择最适合自己的格式 */
/* 英文 */
@font-face {
    font-family: 'JetBrainsMono';
    src: url('./JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2'),
         url('./JetBrainsMono/JetBrainsMono-Regular.ttf') format('truetype');

  }
  
/* 中文 */
@font-face {
    font-family: 'PingFangSC';
    src: url('./PingFangSC/PingFangSCRegular.woff2') format('woff2'),
         url('./PingFangSC/PingFangSCRegular.ttf') format('truetype');
  }

/* 优先加载JetrainsMono字体 如果字符不能使用其加载 那么使用苹方简体加载 如果还是不行加载系统默认的monospace
   通过这样子的方式实现英文数字加载JetbrainMono 中文加载苹方简体
 */
body {
    font-family: 'JetBrainsMono', 'PingFangSC', monospace;
}
/* 将 JetBrain Mono 应用到 <code> 和 <pre> 标签 */
code, pre {
    font-family: 'JetBrain Mono', monospace;
}

当你自己应用的的时候，特别注意路径需要替换成你自己的

在写完之后，在你的主要的html文件中将其引入，如下所示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  …………
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="../static/bootstrap5/css/bootstrap.min.css">
  <!-- 指定字体 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='font/font.css') }}">
</head>
<body>
	……
</body>
</html>