border图形与web字体持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

border图形

border主要是用来给盒子增加边框的,但是在开发中我们也可以利用边框的特性来实现一些形状:

假如我们将border宽度设置成50会是什么效果呢?

如果我们进一步,将另外三边的颜色去除呢?

如果我们将这个盒子旋转呢?

所以利用border或者CSS的特性我们可以做出很多图形:css-tricks.com/the-shapes-…

<style>
    .box{
      width: 100px;
      height: 100px;
      box-sizing: border-box;
      border: 50px solid transparent;
      /* border-right-color: aqua;
      border-bottom-color: gray;
      border-left-color: blue; */

      /* border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent; */

      /* 代码优化 */
      border-top-color: orange;

      /* 翻转 */
      transform-origin: center 25%;
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>

二、Web字体

1.认识Web字体

在之前我们有设置过页面使用的字体:font-family

我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;

这就是所谓的Web-safe字体;

并且这种默认可选的字体并不能进行一些定制化的需求;

比如下面的字体样式,系统的字体肯定是不能实现的：

那么我们是否依然可以在网页中使用这些字体呢?使用Web Fonts即可.

2.Web fonts的工作原理

首先,我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):

对于某些收费的字体,我们需要获取到对应的授权;

对于某些公司定制的字体,需要设计人员来设计;

对于某些免费的字体,我们需要获取到对应的字体文件;

其次,在我们的CSS代码当中使用该字体(重要):

具体的过程看后面的操作流程;

最后，在部署静态资源时,将HTML/CSS/JavaScript/Font一起部署在静态服务器中;

用户的角度:

浏览器一个网页时,因为代码中有引入字体文件,字体文件会被一起下载下来;

浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体;

在浏览器中使用对应的字体显示内容;