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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有办法在localhost中设置表单输入的字体系列?相关的知识,希望对你有一定的参考价值。

使用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标记显示默认字体。

答案

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

您可以将NormalizeReset样式表引入您的项目(或自己动手),以便让您自己更轻松地为您的输入添加样式。

下面是使用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>

以上是关于有没有办法在localhost中设置表单输入的字体系列?的主要内容,如果未能解决你的问题,请参考以下文章

在 html 中设置极小的字体大小

为啥表单提交没有捕获我在输入标签中设置的只读默认值?

如何在 CSS 中设置最小字体大小

不正确的自动完成输入样式;

使用引导程序在表单组中设置输入/文本区域的宽度

如何在 Django 表单输入字段中设置事件处理程序