2016-08-03 6 views
1

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

Но, когда я пытаюсь установить шрифт элемента 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 (PostCSS CLI config.js файл)

{ 
    "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; 
} 

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

ответ

1

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

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

+0

Где я могу указать вариант сброса? Я использую 'postcss-cli' и файл' config.json', как можно увидеть здесь: https://github.com/JamesTheHacker/Simplex – BugHunterUK

+0

Вот документ, как установить параметры для плагинов в 'config.json 'https://github.com/postcss/postcss-cli#--config-c –

1

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

html { 
font-family: Roboto; 
} 

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

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^