有没有办法在localhost中设置表单输入的字体系列？

Posted 2021-04-17

使用XAMPP localhost时，我无法为表单输入设置字体系列。

该字体实际上来自谷歌字体，我已经在html代码中导入它：

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:bold,medium,regular" rel="stylesheet" />

这是CSS代码：

@charset "utf-8";
/* CSS Document */

body {
    font-family: 'IBM Plex Sans Condensed';
}

input {
    font-family: 'IBM Plex Sans Condensed';
}

当作为文件（而不是localhost）查看时，一切正常。但是，在XAMPP中，input标记显示默认字体。

答案

您走在正确的轨道上，但是您正在使用浏览器的“预设”样式。

您可以将Normalize或Reset样式表引入您的项目（或自己动手），以便让您自己更轻松地为您的输入添加样式。

下面是使用Normalize for webkit引擎浏览器的摘录的示例：

CSS

body {
  font-family: "IBM Plex Sans Condensed", sans-serif;
}

input {
  font-family: "IBM Plex Sans Condensed", sans-serif;
}

/**
 * Correct the inability to style clickable types in ios and Safari.
https://github.com/necolas/normalize.css/blob/master/normalize.css
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none; /* or -webkit-appearance: button */
}

[type="text"] {
  -webkit-appearance: none;
}

HTML

<link href="//fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:bold,medium,regular" rel="stylesheet" />

<form>
  <input type='text' value='Hello world'>
  <input type='submit' value='Send form'>
</form>