如何更改单选按钮中的字体样式？

Question

.rad > input {
  visibility: hidden;
  position: absolute;
}
.rad > i {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 0.5px solid gray;
}
.rad > input:checked + i {
  box-shadow: inset 0 0 0 3px #fff;
  background: #ffc000;
}

<p>
  <label class="rad">
    <input type="radio" name="r1" value="a" checked="checked" />
    <i></i> Male
  </label>
  <label class="rad">
    <input type="radio" name="r1" value="b" />
    <i></i> Female
  </label>
</p>

我必须改变字体样式：

font-family:SegoeUI-SemiBold;
font-size:12px;color:#535353;text-align:left;

这些是应该添加的东西。

Answer 1

为什么不在<p>标记中添加相同的样式：

＆＃13;

＆＃13;

p {
  font-family: 'Segoe UI SemiBold';
  font-size: 12px;
  color: #535353;
  text-align: left;
}
.rad > input {
  visibility: hidden;
  position: absolute;
}
.rad > i {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 0.5px solid gray;
}
.rad > input:checked + i {
  box-shadow: inset 0 0 0 3px #fff;
  background: #ffc000;
}

＆＃13;

<p>
  <label class="rad">
    <input type="radio" name="r1" value="a" checked="checked" />
    <i></i> Male
  </label>
  <label class="rad">
    <input type="radio" name="r1" value="b" />
    <i></i> Female
  </label>
</p>

＆＃13;

＆＃13;

＆＃13;

当您正确使用字体font-family: 'Segoe UI SemiBold';时

，对我来说很好

更好的截图：

<强>更新

所选的收音机应具有不同的颜色。在这种情况下，您需要使用<span>：

＆＃13;

＆＃13;

p {
  font-family: 'Segoe UI SemiBold';
  font-size: 12px;
  color: #535353;
  text-align: left;
}
.rad > input {
  visibility: hidden;
  position: absolute;
}
.rad > i {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 0.5px solid gray;
}
.rad > input:checked + i {
  box-shadow: inset 0 0 0 3px #fff;
  background: #ffc000;
}
.rad > input:checked ~ span {
  color: #979797;
}

＆＃13;

<p>
  <label class="rad">
    <input type="radio" name="r1" value="a" checked="checked" />
    <i></i> <span>Male</span>
  </label>
  <label class="rad">
    <input type="radio" name="r1" value="b" />
    <i></i> <span>Female</span>
  </label>
</p>

＆＃13;

＆＃13;

＆＃13;