Измените размер шрифта после смены фамилии семьи

Question

У меня есть вопрос об изменении всех font-size s. я придумываю адаптивный веб-страницу с ниже шрифтом:

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 

и делают, что адаптивные, сделали так много запросов СМИ о шрифте стиле собственности.

#menu li{ 
    font-size:12px; 
} 
@media only screen and (min-width: 768px) { 
#menu li{ 
    font-size:14px; 
} 
} 
@media only screen and (min-width: 1000px) { 
#menu li{ 
    font-size:16px; 
} 
} 
@media only screen and (min-width: 1300px) { 
#menu li{ 
    font-size:17px; 
} 
} 

У меня есть многие из этих классов на моем сайте, и если я изменить семейство шрифтов его так трудно изменить все эти классы во всех запросах СМИ. изменить семейство шрифтов:

font-family: 'Merriweather', serif; 

и источник шрифта:

<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'> 

Таким образом, его самый легкий шрифта, 16px этого, к сожалению, больше, чем 16px шрифта Cambria. У меня есть решение JQuery, который можно масштабировать шрифт на 0,9:

$(document).ready(function(){ 
    $('*').each(function({ 
     $(this).css('fontSize',$(this).css('fontSize').split('px')[0]*0.9); 
    }) 
}) 

, но проблема в том, код мешает быть отзывчивыми на изменение размера. Таким образом, у кого-то есть чистое решение css для этого. Большое спасибо за вашу помощь.

Answer 1

общий раствор А был бы определить общий «базовый» размер шрифта в правиле для html и/или body, а все другие правила использования em, rem или процентных значений: em всегда будут относительно его родителя элемент, rem всегда будет относиться к размеру корня (то есть html).

Так что в этих случаях вы можете просто настроить различные правила в медиа-запросах для html, например html { font-size: 15px; } (или 16, 14, 12 или любые другие), в основном так же, как вы делали это выше). Если все остальные размеры шрифта находятся в em, rem или процентах, все размеры шрифта будут меняться в зависимости от и по отношению к одному правилу.

Answer 2

Одним из решений было бы использовать относительные размеры шрифта, такие как em, поэтому вам не пришлось бы менять все элементы с помощью jQuery. Еще лучше, но менее хорошо поддерживаемый относительный блок - rem. Затем вы можете легко настроить размер шрифта для всего документа:

#menu li { 
    font-size: 0.688em; 
} 

@media only screen and (min-width: 768px) { 
    #menu li { 
     font-size: 0.75em; 
    } 
} 
@media only screen and (min-width: 1000px) { 
    #menu li { 
     font-size: 0.875em; 
    } 
} 
@media only screen and (min-width: 1300px) { 
    #menu li { 
     font-size: 0.938em; 
    } 
} 

document.body.style.fontSize = "90%"; 

MDN article about length units

Другим способом было бы создать еще одну таблицу стилей для большего шрифта, который вы можете вставить или удалить при изменении семейства шрифтов :

#menu li { 
    font-size:11px; 
} 

@media only screen and (min-width: 768px) { 
    #menu li { 
     font-size:12px; 
    } 
} 
@media only screen and (min-width: 1000px) { 
    #menu li { 
     font-size:14px; 
    } 
} 
@media only screen and (min-width: 1300px) { 
    #menu li { 
     font-size:15px; 
    } 
} 

Потому что это довольно сложно, вы можете захотеть использовать SASS or LESS, то вы можете сделать размеры шрифтов переменной.

Кстати, это (на мой взгляд) никогда не рекомендуется использовать такие небольшие размеры шрифта!