CSS-переменная для семейства шрифтов является «недопустимым свойством», хотя та же строка за пределами переменной подходит - PullRequest
Новая
       44

CSS-переменная для семейства шрифтов является «недопустимым свойством», хотя та же строка за пределами переменной подходит

0 голосов
/ 24 июня 2019

Для каждого из следующих элементов h1 и h2 в указанном ниже CSS указывается font-family двумя альтернативными способами: (a) в качестве традиционной строки, например, font-family: Tangerine,cursive; и (b) в качестве ранее определенная переменная CSS, например, font-family: var(--my-font-family-cursive);, одна из альтернатив которой закомментирована.

Вы также можете увидеть мой код в этой ручке CodePen .

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

enter image description here

Однако, когда я комментирую спецификацию строки и раскомментирую спецификацию CSS-переменной, спецификация font-family полностью игнорируется, и по умолчанию для рендеринга используется спецификация агента пользователя моего браузера serif, как на этом скриншоте:

enter image description here

Инструменты разработчика Chrome и Firefox считают, например, font-family: var(--my-font-family-cursive); "Недопустимым значением свойства". Смотрите скриншот.

enter image description here

Обратите внимание, что я использую соответствующий синтаксис CSS-переменной для определения цветов шрифта --my-font-color и --my-font-color-cursive, и эти цвета шрифта распознаются, что приводит к красному h1 и синему h2.

Должно быть, я упускаю из виду нечто глупое, но не могу понять, почему моя формулировка переменной CSS отклоняется.

Вот только один пример из «литературы по CSS», который, кажется, подтверждает именно то, что я делаю: Переменные CSS - Как использовать пользовательские свойства CSS . Этот источник приводит следующий пример: 

:root {
    --headings-font-family: "Times New Roman", Times, serif;
}

h2 {
    font-family: var(--headings-font-family);
}

Вот код, который я описал выше (который также находится на этой ручке CodePen ): 

<html>
<head>
<title>MWE: CSS variable for font-family not working</title>
<style>
    @import url(https://fonts.googleapis.com/css?family="PT Sans");
    @import url(https://fonts.googleapis.com/css?family=Tangerine);

    :root {
      --my-font-family:         "PT Sans", sans-serif ;
      --my-font-family-cursive: Tangerine, cursive ;
      --my-font-color:          red ;
      --my-font-color-cursive:  blue ;
    }

    h1, h2 { font-size: 3em ; }

    h1 {
        color:          var( --my-font-color ) ;
/*      font-family:    "PT Sans", san-serif ;  */
        font-family:    var ( --my-font-family ) ; 
    }

    h2 {
        color:          var( --my-font-color-cursive ) ;
/*      font-family:    Tangerine, cursive ;  */
        font-family:    var ( --my-font-family-cursive ) ; 
    }
</style
</head>
<body>
    <h1>Just some text</h1>
    <h2>Some more text</h2>
</body>
</html>

1 Ответ

1 голос
/ 24 июня 2019

У вас есть лишний пробел при попытке обратиться к переменной css с помощью var (- variable) 

h2 {
    color:          var( --my-font-color-cursive ) ;
    font-family:    Tangerine, cursive ;  */
    font-family:    var( --my-font-family-cursive ) ; 
}
...