尽管CSS，按钮文本比链接文本更大胆

Question

我有一个设计为按钮和真实按钮的链接。 由于某些原因，尽管字体权重和字体大小相同，但两者的文本都具有不同的字体权重。我该如何解决这个问题？

设计的伪按钮：

.btn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}

真正的按钮：

input[type="button"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}

感谢名单！

Answer 1

你确定两者都使用完全相同的字体吗？ Arial对我来说看起来几乎一样：

<强> HTML：

<input type="button" value="Input Button">
<div class="btn">Button Class</div>

<强> CSS：

.btn {
  font-family: Arial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #ffffff;
  text-decoration: none;
  background-color: #ED7004;
  font-size: 14px;
  font-weight: 100;
  padding: 5px 10px 5px 10px;
  margin-bottom: 5px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}

input[type="button"] {
  font-family: Arial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  outline: 0;
  border: 0;
  color: #ffffff;
  text-decoration: none;
  background-color: #ED7004;
  font-size: 14px;
  font-weight: 100;
  padding: 5px 10px 5px 10px;
  margin-bottom: 5px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}

Codepen demo

虽然浏览器之间仍存在明显差异。如果你想要按钮的浅色字体（以及所有浏览器中的相同外观），最好使用适当的（web）字体而不是font-weight：100

Answer 2

-webkit-font-smoothing: antialiased;

Answer 3

font-rendering: geometricPrecision;