【发布时间】：2014-12-15 18:19:20
【问题描述】：
http://stepladderuk.com/dev/wedding/exp/
输入按钮中的文字是粗体的，这是我不想要的。
我不知道是什么让它变粗了。
当我检查元素时，我想出了我在 CSS 中声明的 font-weight:100。
我试过 -webkit-appearance: none;
这会产生一种奇怪的行为，即只有在您悬停时文本才会展开。
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- meta stuff -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matt & Caroline</title>
<meta name="description" content="Description here">
<meta http-equiv="cleartype" content="on">
<!--FONT LINKAGE -->
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/c020518f-a748-4829-83c4-9cd0e83dd476.css"/>
<!-- Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!-- Scripts -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOJWH6GtBIMO1GGByFIf3A9Q6nEe050L0"></script>
</head>
<body class="homepage">
<!--IE notice -->
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section id="rsvp">
<div class="container">
<div class="heading-holder">
<div class="heading-inner">
<img class="arrow-left" src="img/arrow-right.png" alt="arrow">
<h1>rsvp</h1>
<img class="arrow-right" src="img/arrow-left.png" alt="arrow">
</div>
</div>
<div class="inner">
<form action="MAILTO:bz@stepladderuk.com" method="post" enctype="text/plain">
<div class="col col-wide">
<div class="form-group">
<label class="form-row" for="name">Names of everyone in your party</label>
<span class="form-row text-small">Please seperate names with a comma.</span>
<input class="form-row" type="text" name="name">
</div>
<div class="form-group">
<label class="form-row" for="number">Your phone number</label>
<input class="form-row" type="text" name="number">
</div>
<div class="form-group">
<label class="form-row" for="email">Your email address</label>
<input class="form-row" type="text" name="email">
</div>
<div class="form-group">
<label class="form-row" for="dietary-requirements">Special dietary requirements</label>
<input class="form-row" type="text" name="dietary-requirements">
</div>
<div class="form-group">
<label class="form-row" for="song">Favourite song</label>
<input class="form-row" type="text" name="song">
</div>
<div class="form-group">
<label class="form-row" for="transport">Transport</label>
<span class="form-row text-small">Please indicate if travelling by coach whether you will need transport to the venue and which coach you will return on</span>
<input class="form-row" type="text" name="transport">
</div>
</div>
<div class="clear"></div>
<hr class="hr-2-em" />
<p>
<span class="text-small">
Please fill out this form, click send and send the automatically generated email.
</span>
</p>
<div class="col-wide">
<div class="link-style-2 center">
<span class="left-edge"></span>
<input class="text" type="submit" value="Send It!">
<span class="right-edge"></span>
</div>
</div>
</form>
</div><!-- end inner -->
</div><!-- end container -->
<div class="clear"></div>
</section>
</body>
</html>
CSS;
form{
z-index:100;
width:50%;
margin:0 auto;
.form-group{
margin-bottom:2em;
}
.form-row{
display:block;
}
input[type=text]{
border:0;
background-color:white;
padding:.4em;
width:100%;
font-family:$font-main, georgia, serif;
width:100%;
margin-top:.2em;
}
input[type=submit]{
font-family:$font-main, georgia, serif;
border:0;
font-weight:100;
-webkit-appearance: none!important;
}
}
在除 IE 之外的所有浏览器中执行此操作。我在 Mac 上。
这就是它的样子；
这就是它的外观（这是网站上的另一个按钮，但它只是一个普通的链接，而不是表单输入元素）
我很确定问题是因为它是一个输入。
【问题讨论】：
-
请在问题本身中分享您的代码，更多信息在这里：MCVE
-
在 Chrome、Firefox 或 IE 上不是粗体。这是常规重量，假斜体。显然原因不在发布的代码部分。请提供实际重现问题的代码。并发布 CSS 代码，或者至少在类似样式表的代码中指定您正在使用的非 CSS 工具。
-
添加了整个页面的代码。
-
CSS 是 SASS。它不是假斜体，字体是从 fonts.com 加载的。当我在 IE8 中查看它时，它是假斜体，我猜是因为浏览器不支持嵌入字体。无论如何，我认为这不是问题，正如您在我发布的屏幕截图中看到的那样，底部是它应该如何工作。完全相同的样式，唯一的区别是它是一个输入。