我有一个设计为按钮和一个真正按钮的链接。 出于某种原因,尽管字体粗细和字体大小相同,但两者的文本具有不同的字体粗细。 我怎样才能解决这个问题?

在此处输入图片说明

设计的伪按钮:

.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);
}

谢谢!

#1楼 票数:2

您确定两者都使用完全相同的字体吗? 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);
}

代码笔演示

尽管浏览器之间仍然存在明显差异。 如果您想要按钮的浅色字体(并且在所有浏览器中具有相同的外观),最好使用适当的(网络)字体而不是 font-weight: 100

#2楼 票数:0

-webkit-font-smoothing: antialiased;

#3楼 票数:0

font-rendering: geometricPrecision;

  ask by Kashuda translate from so

未解决问题?本站智能推荐:

3回复

CSS超链接的任何文本

给CSS设计者的问题。 如何将锚定行为添加到没有"<a href.."属性的任何CSS类中。 这就是我的意思。 我将拥有以下html代码: 并且此文本应具有链接行为(访问的颜色,活动的颜色和下划线,“指向手的指针”)。 有可能在CSS中做到这一点吗?
3回复

基于链接文本值的CSS

我有一些这样的html(自动生成): 这两个按钮是通过框架自动生成的,因此我几乎无法控制这两个链接之间的空间。 我想在两个按钮之间留出一些空间。 我添加了一些CSS 但这又在“取消”和“保存的左侧”链接的右边增加了边距-浪费了很多空间。 是否可以编写一些基于LINK文本值的
1回复

使用css构建具有图像,文本和链接的响应按钮

我尝试了几件事,但我运气不好。 我需要在按钮背景图像上构建一个包含图像和文本的按钮。 此外,点击按钮内的任何位置都应重定向到某个页面,例如google.com。 这就是按钮的外观 我遇到的挑战是,当按钮文本发生变化或屏幕尺寸发生变化时,图像和文本的对齐方式会变得混乱。 如果它
3回复

Css按钮文本问题

我的网站有一个CSS按钮,其中包含文本中间的文本,但现在文本位于底部,按钮较小。 其他人有权访问我的根文件夹进行修改,我不知道他们做了什么。
1回复

图像,文本和按钮并排CSS

我是CSS的新手,我想实现HTML或CSS的后续功能,任何帮助都将非常有用。 我有的代码
3回复

HTML 和 CSS:按钮上的文本

我的个人网站主页上有一个社交媒体按钮。 实际上它工作得很好,但是当我尝试在按钮上添加文本(例如 FOLLOW)时,文本层使其无法点击。 我的代码没有涉及 JS 函数。 我怎么解决这个问题? 提前致谢。 编辑:添加了 CSS 代码。 编辑#2:感谢您的所有回答。 但是<button>
4回复

使用CSS更改链接文本

我想用CSS更改我的链接文本,但它不起作用。 a.testclass { display: none; } a.testclass:after { content: 'new text'; } <a class="testclass;" href="someurl
2回复

通过CSS用图形替换链接文本

我想用图标替换引导导航中的链接。 但仅当将A类添加到导航中时。 我目前有一个固定的导航,当用户使用 html(头) 当滚动100px时,将“ shrink”类添加到标题div中。 的CSS 当“收缩”类添加到.header时,我希望链接(当前为文本)变成图标。