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

Question

Представьте, что у вас есть контейнер, под которым будет много других элементов. Каждый из этих элементов может иметь свой размер шрифта явно (например, p может быть 16px, , 20px и т. Д.).

Я хочу отобразить этот контейнер с размером шрифта, уменьшенным на определенный коэффициент, сохраняя при этом относительные различия в размерах между элементами внутри контейнера (например, размер шрифта p должен быть 4/5 от размер шрифта).

Могу ли я сделать это с помощью HTML/CSS?

Edit для контекста:

Я использую какую-то тему, и я хотел бы желательно, чтобы избежать прохождения всех элементов, переливается их в em с (из которых я хорошо известно) ни переопределять их всех.

Что я действительно задавался вопросом, было ли что-то вроде: .myDiv { font-size-scale: 0.5; }, что я мог бы просто применить и сделать с ним.

Answer 1

Вы можете сделать это, используя em.

HTML,

<div> 
    <p>Some Text</p> 
    <blockquote>Some Block</blockquote> 
</div> 

<div class="small"> 
    <p>Some Text</p> 
    <blockquote>Some Block</blockquote> 
</div> 

CSS,

p { font-size: 2em; } 
blockquote { font-size: 4em; } 

div { font-size: 16px; } 
div.small { font-size: 9px; } 

Смотрите пример: https://jsfiddle.net/toz75hp2/3/

---

Если вы хотите избежать em,, то вы можете просто использовать значения % percentage.

Смотрите этот пример: https://jsfiddle.net/toz75hp2/4/

CSS,

p { font-size: 200%; } 
blockquote { font-size: 350%; } 

div { font-size: 16px; } 
div.small { font-size: 9px; } 

Cross Browser Внимание! Он не работает во всех браузерах. Некоторые дают неожиданные результаты.

---

Или вы просто ссылаясь масштабировании вы можете просто использовать CSS zoom. Но это увеличит все (нет свойства масштабирования). Так что это нормально использовать, если у вас есть только текст внутри контейнера.

Смотрите пример: https://jsfiddle.net/toz75hp2/5/

.zoom { 
    zoom: 2; 
    -moz-transform: scale(2); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(2); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(2); 
    -webkit-transform-origin: 0 0; 
} 

Answer 2

Вы можете сделать это с помощью SASS и использовать некоторую математику для определения размеров шрифта.

Простой пример будет выглядеть следующим образом

$blocksize: 20px; 

blockquote { 
    font-size:$blocksize; 
} 

Вы можете установить размер шрифта blockqoute в качестве переменной. Затем примените эту переменную как размер шрифта для blockquote.

Далее выполните операцию переменной blockize для ваших элементов «p».

p { 
    font-size:$blocksize * 0.2; 
} 

Теперь элемент p будет на 80% или 4/5 размером вашего блока.

Answer 3

px - это контроль абсолютного размера, em - относительный контроль размера. Использование em должно позволить вам иметь масштаб материала и изменять его размер так, как вы этого хотите. Хотя может быть и боль, если у вас есть значения по умолчанию, такие как 16px, 20px, и вы хотите, чтобы конкретный контейнер имел разные значения размера, вы можете пойти со встроенными атрибутами стиля.

Ex:

<p style="font-size: 1em">Text here.</p> 

Answer 4

«Эмс» ваш друг

если вы установите размер шрифта контейнера 10px, вы можете указать размер шрифта своих дочерних элементов, как EMS, 1em является сопоставимый с размером шрифта исходного элемента, поэтому в этом случае:

p { 
    font-size: 1.6em; 
} 

сравнимо с 16px. Настройте оставшиеся размеры шрифта внутри элемента, затем масштабируйте их вверх и вниз, просто измените размер шрифта контейнера. Шрифты ваших дочерних элементов будут масштабироваться с изменением размера шрифта.