Есть ли способ установить семейство шрифтов для ввода формы в localhost? - PullRequest
Новая
       12

Есть ли способ установить семейство шрифтов для ввода формы в localhost?

0 голосов
/ 03 февраля 2019

При использовании локального хоста 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';
}

При просмотре в виде файла (не localhost) все работает как обычно.Однако в XAMPP тег input показывает шрифт по умолчанию.

1 Ответ

0 голосов
/ 03 февраля 2019

Вы на правильном пути, но вы боретесь с предустановленными стилями браузера.

Вы можете добавить 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>
...