Могу ли я заставить настраиваемое базовое значение для абсолютного размера шрифта (средний, х-большой) в CSS?

Question

Предположим, у меня нет выбора, кроме как использовать абсолютное значение размера шрифта, например. font-size: x-large;. Согласно многим статьям, точный размер шрифта такого элемента зависит от предпочтений пользователя. Мой вопрос (может быть, глупый): могу ли я заставить какую-то пользовательскую ценность вместо предпочтений пользователя в качестве базы?

E.g. У меня есть документ HTML с абсолютными значениями, и я хочу отобразить его внутри iframe (в том же домене) с некоторым настраиваемым значением в качестве базы шрифтов. Таким образом, элементы с размером шрифта «x-large», «medium», «small» и т. Д. Изменяют свой реальный размер шрифта в соответствии с этим базовым значением. Это может быть полезно, например, просто чтобы продемонстрировать, как эти значения шрифта работают. Могу ли я это достичь? И как? Может быть, есть определенное свойство в окне объекта, как «window.fontSizePreference» - кто знает ...

Answer 1

Если absolute значение уже было объявлено, и вы хотите, чтобы просто заменить его, используя значение length, у вас есть несколько вариантов ,

Возможные решения

Переопределение CSS будучи более specific. Если ваш код объявляет значение с помощью:

div.xlarge { 
    font-size: x-large; 
} 

Вы можете добавить еще один CSS selector таргетинг, что div и CSS будет использовать более конкретные из двух значений. Например, вы могли бы добавить body или родительский контейнер:

body div.xlarge { 
    font-size: 12px; /* This would overwrite the x-large value above */ 
} 
div div.xlarge { 
    font-size: 12px /* So would this */ 
} 
.parentclass div.xlarge { 
    font-size: 12px; /* And this */ 
} 

Ради примера, я использую div с родителем div и родитель с именем класса .parentclass. Вы можете также использовать span, p, li, ul, a и т.д.

Примечание: Узнайте больше о Specificity от MDN.

---

Вы также можете добавить стайлинга инлайн к желаемой цели. Например, если ваш HTML является:

<div class="xlarge">My Text</div> 

Вы можете добавить встроенный стиль, как это и было бы переопределить font-size CSS объявленное значение:

<div class="xlarge" style="font-size: 12px;">My Text</div> 

---

Последняя вещь, которую я рекомендовал бы , использует тег !important для переопределения значений CSS, которые вы не могли бы использовать в других целях, используя указанные выше методы. Предполагая, что нет других объявлений !important, последние !important заставят значение CSS.

div.xlarge { 
    font-size: 12px !important; /* Will override more specific CSS & Inline CSS */ 
    font-size: x-large; /* Would be ignored */ 

Примечание: Подробнее об использовании !important из CSS-Tricks.

---

IFrames

Ни одно из этих решений не будет работать только с CSS если вы пытаетесь редактировать iframe, если у вас есть контроль над iframe содержанием. Для редактирования iframeCSS, просто сделать быстрый поиск на переполнение стека и есть number из solutions.