CSS – Font

前言

之前的写过几篇都有涉及到一些 font 的知识. 这篇做一个整理, 和一些实战.

CSS Fonts

这篇主要讲 font-family, font-size 这些 CSS 属性.

CSS Web Fonts

这篇主要讲如何引用字体, 比如 Google Fonts, Custom Fonts, @font-face 等

Figma Text

这篇是关于 Figma 的, 和网站没有直接关系, 但也一起记入呗.

postcss-font-magician

这个是一个方便的工具. 帮助做 @font-face 的.

网站使用 Google Fonts

去 fonts.google.com search

找到后进入

选择要支持的 weight

有 2 种 import 方式, 一是通过 HTML link, 二是通过 CSS @import

然后就可以用了

去访问它的 link 链接, 其实它就是一个 CSS 里面很多的 @font-face, src to google CDN, 如果担心的话可以通过 google-webfonts-helper 下载字体, 官网其实也是可以下载 (but 官网的是 TTF, helper 是 WOFF2)

Google Fonts 改版问题

在临摹练习的时候发现, 怎么字体不一样的... ?

一轮 debug 之后才发现原来 Google Fonts 的版本不一样.

早期的版本

<link
  href="https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap"
  rel="stylesheet"
/>

现在的版本

<link
  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap"
  rel="stylesheet"
/>

一个是 css, 一个是 css2. 

效果是不一样的哦, 坑人啊~

(新)CSS

相关

标签