获取正确的文本颜色和字体粗细答案

【问题标题】：Get the correct text-color and font-weight获取正确的文本颜色和字体粗细
【发布时间】：2021-10-31 18:01:16
【问题描述】：

我正在尝试设计这个按钮

根据这张图片（只有图片来源存在。）

对代码应用更改

HTML

<a href="#">Community</a>

CSS

#topbar ul li a { 
background-color: #6293F0; 
color:  #D6EA68;
}

结果是

问题是要获得 1) 正确的文本颜色，2) 字体粗细。

每次我使用不同的颜色选择器时都会得到不同的文本颜色。示例：这些是来自黄色文本颜色的不同颜色选择器的颜色代码：#D6CD45、#D6EA68、#D4E160、#F3FF9C、#C8D762、#F4F766。

我应该如何解决这个问题？

【问题讨论】：

文字上好像有阴影。
@AHaworth 是的，看来我错过了影子。感谢您指出这一点。
你已经基本发现，没有文字颜色的概念。在这张低清晰度图像中，可以看到许多不同的颜色。您可以尝试获取大量颜色选择器读数并取平均值，但老实说，您很可能通过肉眼进行匹配。无论如何，不同的屏幕显示颜色会略有不同。
@AHaworth 感谢您的见解。

标签： css colors fonts

【解决方案1】：

把它包裹在div里怎么样？

&lt;div class="box"&gt;&lt;a href="#"&gt;Community&lt;/a&gt;&lt;/div&gt;

.box {
  width: 100px;
  height: 40px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #6293F0;
}

.box a {
  color: #D6EA68;
  font-weight: 800;
}

【讨论】：

感谢您的帮助。

【解决方案2】：

a { 
  background-color: rgb(100, 145, 239); 
  color:  rgba(234, 255, 46, 1);
  text-shadow: -2px 1px rgba(0,0,0,.4);
  padding: 30px 30px;
  letter-spacing: -0.05em;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

&lt;a href="#"&gt;Community&lt;/a&gt;

【讨论】：

感谢您的帮助。