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>
注意需要将其放到bootstrap5的后面，因为bootstrap5的字体样式会覆盖你指定的字体样式，这个好像和优先级有关系
