Процитированный шрифт 'sans-serif' не работает должным образом в CSS

Question

Я пишу небольшой статический сайт (HTML и CSS) и споткнулся о поведении в свойстве font-family, чего я не понимаю. Мне нравится писать мой код в соответствии с красивым и чистым взглядом, поэтому всегда цитируйте шрифты в CSS.

Насколько я понимаю CSS2.2 specification правильные, цитируемые шрифты допускаются:

имен шрифтов семьи должны быть указаны цитируемыми как строки или кавычек как последовательность из одного или нескольких идентификаторов.

К сожалению, это не работает должным образом в моем случае. Я привел пример ниже.

.test1 
 
{ 
 
    font-family: 'sans-serif'; 
 
} 
 

 
.test2 
 
{ 
 
    font-family: 'arial'; 
 
} 
 

 
.test3 
 
{ 
 
    font-family: sans-serif; 
 
}

<h1 class="test1">Test</h1> 
 
<h1 class="test2">Test</h1> 
 
<h1 class="test3">Test</h1>

Я проверил свойства с Google Chrome 54.0.2840.99 и Internet Explorer 11.0.9600.18450. Почему цитируемый шрифт для arial работает, но не для sans-serif?

Answer 1

Sans-serif - это не имя шрифта, а тип шрифта ... Для того чтобы сделать работу с шрифтом, вам необходимо ввести хотя бы имя шрифта! Имя шрифта в обязательном порядке. семья имя Ex

.myclass{font-family: 'myFontName', sans-serif;} 

• - имя шрифта-семейства, как "времена", "Курьер", "Arial" и т.д.
• родовой семьи - Имя родовое семейство, такое как «засечка», «без засечек», «скоропись», «фантазия», «моноширинность».

Source