css 个人喜欢的样式 速查笔记

起因， 目的:

记录自己喜欢的， 觉得比较好看的 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 字体效果:

走过路过，支持一下啊。