postcss-autoreset переопределяет семейство шрифтов с помощью браузера по умолчанию

Я использую postcss-autoreset, который применяет all: initial; к любому элементу стиля в моих файлах CSS.

Но когда я пытаюсь установить шрифт элемента body, только элементы, которые я не стилизовал в CSS, получат шрифт. Элементы, которые я стилизовал, возвращаются к настройкам браузера по умолчанию. Что очень странно.

all: initial;, кажется, переопределяет font-face, потому что, когда я просматриваю в инспекторе Chrome, он отображается как переопределенный.

В качестве примера ниже все мои элементы на странице отображаются шрифтом Roboto, за исключением текста в заголовке, который использует браузер по умолчанию.

app.css

@import "variables.css";
@import "header.css";
@import "footer.css";

body {
  font-family: 'Roboto';
  margin: 0 auto;
  display: block;
}

header.css

header {
    padding: 10px 0;
}

config.js (файл config.js PostCSS CLI)

{
    "use": [
      "postcss-import",
      "postcss-cssnext",
      "lost",
      "rucksack-css",
      "postcss-autoreset",
      "postcss-font-magician"
    ],
    "input": "src/app.css",
    "output": "css/main.css",
    "local-plugins": true,
    "autoprefixer": {
      "browsers": "last 2 versions"
    }
}

Вот вывод, который производит postcss:

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 100;
  src: local("Roboto Thin Italic"),local(Roboto-ThinItalic),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YVQlYEbsez9cZjKsNMjLOwM.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-Yfk_vArhqVIZ0nv9q090hN8.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 300;
  src: local("Roboto Light Italic"),local(Roboto-LightItalic),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Italic"),local(Roboto-Italic),url(//fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 500;
  src: local("Roboto Medium Italic"),local(Roboto-MediumItalic),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0WfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Bold Italic"),local(Roboto-BoldItalic),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 900;
  src: local("Roboto Black Italic"),local(Roboto-BlackItalic),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpWfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpY4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"),local(Roboto-Thin),url(//fonts.gstatic.com/s/roboto/v15/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUffY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local(Roboto),local(Roboto-Regular),url(//fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"),local(Roboto-Bold),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 900;
  src: local("Roboto Black"),local(Roboto-Black),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIvY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

header,
header .brand,
header nav,
header nav li,
header nav a,
header nav,
header nav ul,
header nav li,
body,
body {
  all: initial
}

header {
  background: #00AFEC;
  display: block
}

header .brand {
  width: 100%
}

header nav li {
  display: block;
  text-align: center
}

header nav a {
  color: #FFF;
  text-decoration: none;
  font-size: 18px
}

@media (min-width: 361px) {
  header nav {
    width: 100%
  }
  header nav ul {
    float: right
  }
  header nav li {
    padding: 0 30px
  }
}

body {
  font-family: 'Roboto';
  margin: 0 auto;
  display: block;
}

Любая идея, почему это происходит?


css postcss
person BugHunterUK    schedule 03.08.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

postcss-autoreset принимает вариант reset. По умолчанию это просто all: initial, который сбрасывает шрифт. Но я рекомендую установить reset в all: initial; font-family: inherit; font-size: inherit.

Итак, в postcss-autoreset вы должны явно указать, какие свойства вы действительно хотите наследовать. И вы можете установить некоторые свойства наследования по умолчанию в опции reset.

person Andrey Sitnik    schedule 04.08.2016
comment
Где я могу предоставить возможность сброса? Я использую файлы postcss-cli и config.json, как показано здесь: github.com/JamesTheHacker/Simplex - person BugHunterUK; 04.08.2016
comment
Вот документы, как установить параметры для плагинов в config.json github.com/postcss /postcss-cli#--config-c - person Andrey Sitnik; 05.08.2016

arrow_upward
1
arrow_downward

Обычно семейство шрифтов наследуется родительским элементом. Таким образом, вы можете использовать простой

html {
 font-family: Roboto;
}

чтобы вся страница использовала шрифт Roboto, даже если для ваших элементов явно не определено семейство шрифтов - они просто наследуют значение от своего родителя, которое равно html (или в вашем примере body).

Если вы используете postcss-autoreset, все элементы, созданные вами, получат свойство all: initial;, которое сбрасывает семейство шрифтов. Поэтому эти элементы НЕ будут иметь Roboto font-family.

Кстати, я бы не рекомендовал вам использовать postcss-autoreset. Я просто не вижу смысла в его использовании, так как он мало что делает (только добавляет 1 свойство/значение), и это как бы нарушает концепцию наследования css. На мой взгляд, люди должны использовать postcss в первую очередь для балансировки несоответствий браузера. Такие плагины, как autoprefixer и postcss-fixes (да, здесь немного саморекламы) отлично справляются со своей задачей. Если вы хотите заменить препроцессор sass/less/stylus, некоторые другие плагины, такие как precss, могут иметь смысл, но вся эта концепция добавления множества микро-плагинов, приводящая к неожиданному поведению и выводу, ИМХО слишком нестабильна и вызывает больше проблем, чем решает.

person MattDiMu    schedule 04.08.2016