参考设计图实现按钮时如何获取正确的text-color与font-weight

现有代码参考 #

HTML：

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

CSS：

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

问题1：文本色值取色不一致解决方法 #

• 取色时避开文本边缘的抗锯齿过渡区域，仅选取文字中心完全不透明的实心区域取样，边缘像素是文字色和背景色混合的半透明值，取样会出现偏差
• 若没有设计图源文件，可对文字核心区域多次取样，选择出现频次最高的色值，再放到当前蓝色按钮背景上预览微调，以肉眼视觉效果和设计稿匹配为最终标准，无需纠结绝对色值一致，不同显示设备本身也存在色差

问题2：font-weight取值确定方法 #

• 先确保你CSS中设置的font-family和设计稿使用的字体完全一致，不同字体的相同字重参数渲染出来的粗细差异很大
• 没有源文件标注字重的话可以写测试用例，依次设置font-weight: 400/500/600/700这几个常用字重值，在和设计稿相同的字号下对比，选择视觉粗细最匹配的参数即可

内容的提问来源于stack exchange，提问作者Harpreet Singh Kapula