CSS|自定义字体,让页面看起来更加舒服一些

1,706

如何选择自己喜欢的页面字体?

每天一个前端小技能:页面自定义字体,让我们的页面不在千篇一律。 关于页面字体,其实我们很多时候都没怎么注意,我们基本上也知识更改字体font-size,font-weight仅此而已,我们常常看到别人的页面很清爽,很特别,其实很可能就是因为字体的原因。

举个🌰: 下面两张图我们就明显看出来给人的感觉不一样:

img-2.png

img-1.png 第一张就是常规的字体,浏览器默认的,而第二张就是自定义的字体Caveat随便选的一个,虽然是随便选的,但是明显让人觉得不太一样了

好了,切入正题

  1. 如何使用自定义字体
  2. 如何选择自己想要的字体

第1⃣️步:使用自定义字体,其实很简单,我们都知道一个属性:font-family,这个就是规定页面使用的字体样式的,当然有新的属性@font-face也是一样的,关于性能的优化啥的参考大佬讲的

那就直接第2⃣️步吧:如何选到自己喜欢的字体,答:找呗。我们肯定不可能自己创建一个自己脑海中的字体,那么退而求其次,我们可以找嘛,世界上的人千千万,肯定有一个人和我们的idea不谋而合的,所以我们要做的就是去找到一个和我们脑海中字体匹配的已有的字体,这个网站上就有很多,只要想法不是太过奇异,应该都可以找到当我们找到一个和头脑中类似的字体时,比如这个:

img-03.png 我们点击它,进入它的详情,我们要了解一下它,有select styles | Glyphs | About | License | Pairings 这些信息需要我们了解

img-04.png

  • select styles:字体设计的样式,有的宽一点,有的窄一点什么的,可以更加细致的接近你想要的那个效果
  • Glyphs:这个字体中有哪些字节可以使用到该样式(一般都是0-9,a-z,还有一些常用字符,但是有一些会有汉字,根据自己页面使用到的文字来选择)
  • About:一些介绍
  • License:开源协议,一定要看哦,尊重开源
  • Pairings:其他搭配的字体样式

了解的差不多了,该上手了!!!

我们可以下载到本地或者直接使用@import url()两种方式来使用

  1. 下载到本地使用:点击download下载到本地

    @font-face {
      font-family: "Open Sans";
      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }
    
  2. 从服务器加载:点击右上角的菜单

img-05.png 直接把代码拉进页面即可

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap");

body{
  font-family: "Caveat", sans-serif;
}

当然也可看文档进一步了解