input和textarea中字体样式不同的解决方法

当我们写一个输入框群组时，input和textarea中字体样式会不同，比如下面：

里面输入的字也不一样：

代码在这里：

html：

<div style="margin: 0 auto; width: 800px; height: 800px;">
        <input type="text" name="email" class="info-input" placeholder="您的邮箱地址"><br>
        <textarea name="message" class="info-textarea" style="overflow: hidden" placeholder="您的留言内容"></textarea>
    </div>

css：

.info-input {
    width: 570px;
    height: 35px;
    margin-top: 14px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    padding-left: 13px;
    box-shadow: 0px 13px 10px -15px #ccc inset;
}
input::-webkit-input-placeholder{
    color: #999999;
}
.info-textarea {
    width: 570px;
    height: 150px;
    margin-top: 14px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    padding-left: 13px;
    padding-top: 13px;
    resize: none;
    box-shadow: 0px 13px 10px -15px #ccc inset;
}
textarea::-webkit-input-placeholder{
    color: #999999;
}

我们可以看出是默认样式出了差异，解决方法也很简单，分别为所有属性增加字体种类和字体大小即可。

代码如下：

.info-input {
    width: 570px;
    height: 35px;
    margin-top: 14px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    padding-left: 13px;
    font-family:"微软雅黑";
    font-size: 14px;
    box-shadow: 0px 13px 10px -15px #ccc inset;
}
input::-webkit-input-placeholder{
    color: #999999;
    font-size: 14px;
    font-family:"微软雅黑";
}
.info-textarea {
    width: 570px;
    height: 150px;
    margin-top: 14px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    padding-left: 13px;
    padding-top: 13px;
    resize: none;
    font-family:"微软雅黑";
    font-size: 14px;
    box-shadow: 0px 13px 10px -15px #ccc inset;
}
textarea::-webkit-input-placeholder{
    color: #999999;
    font-size: 14px;
    font-family:"微软雅黑";
}

html不变。效果图就不上了，自己试一下就好。