当我想用 CSS 写一个新 CSS Logo 的时候...

按照小伙伴们的请求，我用 CSS 写了一个新的 CSS Logo。

一开始，我想从它的官方库里找找，看看有没有直接用 CSS 写好的源码，发现没有，就找了最容易查看细节的 SVG 的文件。

把它导入 figma 之后，发现啥用也没有，我以为能直接看背景矩形的圆角，发现无论是这个背景还是 CSS 文字都是路径，没办法直接测量圆角。

然后我又想看一下 CSS 与边框的距离，发现这些数字也不是挺精确...大概 34px 吧，不知道是不是软件的问题，算啦，就简单粗略的还原一下吧。圆角的问题，这里我直接覆盖一个新的矩形，调一下透明度，然后调整圆角，直到和 logo 的圆角看起来一致就好了，大概 68px，这里注意一下，CSS 最后一个 S 的弧度和这个圆角似乎也保持了一致。再看宽度和高度是 440px。背景紫色是 #663399，这个官方仓库也写明了。

接下来，我们需要下载 CSS 这几个字使用的字体，Dinish Condensed Heavy。这样准备好了需要的素材，可以开始写代码了。

HTML 部分比较简单，直接定义一个 <div>然后 class 设置为 logo，里边写上CSS：

<div class="logo">CSS</div>

之后在 CSS 里边，我们直接看重点，使用 @font-face导入 Dinish 字体，font-family 指定字体的名字，src 指定字体所在路径：

@font-face {
  font-family: "Dinish";
  src: url("./DINishPreviewCondensed-heavy.ttf");
}

之后设置 logo 样式，这里字体指定刚才定义的 Dinish 字体，然后设置宽高、背景、圆角、字体颜色、字体大小，这个字体大小也是粗略目测。之后用 flex 布局把文字放到右下角，设置一下 padding，右边的间距。下方因为文字有行高，就粗略设置一下 line-height 就好了。

      .logo {
        font-family: Dinish;
        width: 440px;
        height: 440px;
        background: #663399;
        border-radius: 0px 68px 68px 68px;
        color: white;
        font-size: 220px;
       
        display: flex;
        align-items: end;
        justify-content: end;

        padding-right: 34px;
        line-height: 248px;
      }

这样一个不怎么精确的 CSS Logo 就写好了，有兴趣的小伙伴可以深入研究一下，分享一下精确的数值。