起因, 目的:
记录自己喜欢的, 觉得比较好看的 css.
下次用的时候,直接复制,很方便。
1. 个人 html 模板, 导入常用的 link
- 设置英语字体: Noto
- 导入默认的 css
- 使用网络 icon 图标
- 导入 Bootstrap css 框架
html
<!-- 设置英语字体: Noto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><!-- 使用 icon, 比如 <i class="fa-solid fa-info"></i> -->
<!-- 打开,https://fontawesome.com/icons, 然后搜索 info -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="crossorigin="anonymous" referrerpolicy="no-referrer" /><!-- 导入自己的 css 文件 -->
<link rel="stylesheet" type="text/css" href="styles.css"><!-- 导入 Bootstrap 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
2. 常用 css 模板
todo, 以后再增加。
* {font-family: "Noto Serif", system-ui;font-optical-sizing: auto;
}
Noto 字体效果: