html - 使用 html、CSS 和提供的字形设计和 UI 元素

Question

因此，我得到了一个具有字形图标的元素，并被要求使用 html、css 和提供的字体对其进行编码。现在每个字形图标都有代码和连字。任何人都可以帮我吗？我应该用什么方法开始对该元素进行编码。

Answer 1

SVG

可以使用 SVG 创建给定的形状。
您将必须学习大量 SVG 才能创建复杂的形状。
我将从 the basics 开始

.widget {
  width: 300px;
  height: 300px;
}
.pill {
  stroke: #999;
  stroke-width: 1;
}
.pill .top {
  fill: Orange;
}
.pill .bottom {
  fill: LightSeaGreen;
}
.pill .circ-outer {
  fill: rgb(120, 50, 120);
}
.pill .circ-inner {
  stroke: none;
  fill: white;
}
.pill .cross {
  stroke: rgb(120, 50, 120);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.handle {
  stroke: #999;
  fill: #555;
}
.ribble {
  stroke: #777;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<svg class="widget" viewBox="0 0 100 100">
  <defs>
    <filter id="drop">
      <feOffset in="SourceAlpha" dx="0" dy="0.2" result="off" />
      <feGaussianBlur result="blurOut" in="off" stdDeviation="0.5" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <path class="handle" d="m35,16
                          a 5 10 0 0 1 0,70"/>
  <line class="ribble" x1="43" y1="43" x2="43" y2="57" filter="url(#drop)"/>
  <line class="ribble" x1="45" y1="45" x2="45" y2="55" filter="url(#drop)"/>
  <line class="ribble" x1="47" y1="47" x2="47" y2="53" filter="url(#drop)"/>
  <g class="pill">
    <path class="top" d="m10,50 0,-30
              a 5 5 0 0 1 30 0 v 30" />
    <path class="bottom" d="m10,50 0,30
              a 5 5 0 0 0 30 0 v -30" />
    <circle class="circ-outer" cx="25" cy="50%" r="15" />
    <circle class="circ-inner" cx="25" cy="50%" r="10" filter="url(#drop)" />
    <polyline class="cross" points="30,50 20,50 25,50 25,55 25,45" />
  </g>
</svg>