如何统一联系表单textarea与其他字段的输入字体样式？

问题分析 #

你当前的CSS仅为::placeholder设置了avenir_nextdemi_bold字体，但输入框的用户输入内容并未统一指定字体。浏览器会为不同表单元素分配默认字体（比如textarea可能默认使用衬线字体，input则用无衬线字体），这就是样式不一致的根源。

解决方案：统一所有表单元素的输入字体 #

修改通用表单元素选择器，添加font-family属性，让input、select、textarea的输入文本字体统一：

input,
select,
textarea {
  background-color: #f2f2f2;
  display: block;
  margin: auto;
  font-size: 1em;
  padding: 25px;
  border: none;
  outline: none;
  margin-top: 20px;
  margin-bottom: 16px;
  box-sizing: border-box;
  resize: vertical;
  /* 新增：统一输入内容字体 */
  font-family: avenir_nextdemi_bold, sans-serif;
}

修改后，input和textarea的用户输入文本会使用相同字体，同时::placeholder的字体设置不会被覆盖（其优先级足够）。

为textarea单独设置自定义字体 #

若需要让textarea使用和其他输入框不同的字体，直接在textarea的独立规则中添加font-family即可，该规则优先级高于通用选择器：

textarea {
  height: 200px;
  /* 单独指定textarea的自定义字体 */
  font-family: 'Your Custom Font', serif;
}

补充：自定义字体加载（非系统字体场景） #

如果avenir_nextdemi_bold是自定义字体，需先通过@font-face加载，否则浏览器会 fallback 到默认字体：

/* 先加载自定义字体文件 */
@font-face {
  font-family: 'avenir_nextdemi_bold';
  src: url('path/to/avenir-next-demi-bold.woff2') format('woff2'),
       url('path/to/avenir-next-demi-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 再为表单元素设置字体 */
input,
select,
textarea {
  /* ...其他原有属性 */
  font-family: avenir_nextdemi_bold, sans-serif;
}

内容的提问来源于stack exchange，提问作者andre