html - 有没有办法在本地主机中设置表单输入的字体系列？

Question

当使用 XAMPP 本地主机时，我无法为表单输入设置字体系列。

字体实际上来自Google Fonts，我已经在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';
}

当作为一个文件(而不是本地主机)查看时，一切正常。 但是，在 XAMPP 中，input标记改为显示默认字体。

Answer 1

您走在正确的轨道上，但您正在与浏览器的“预设”样式作斗争。

你可以带进来 Normalize或 Reset将样式表添加到您的元素中(或自己制作)，让您更轻松地设置输入的样式。

下面是一个使用 Normalize 的提取物用于 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>