Как сделать размер шрифта независимо от разрешения экрана и размера монитора?

Question

Я работаю над одним приложением, в котором я хочу сделать размер шрифта, который не зависит от разрешения экрана и размера экрана. Размер шрифта должен быть одинаковым во всех разрешениях и всех размерах экрана. Как это сделать с помощью javascript и css?

Я думаю, что пиксель за точку связан с оборудованием, поэтому я не уверен, что javascript и css имеют доступ к нему.

Я пробовал много альтернатив, но не смог найти точного решения.

Answer 1

Там нет хорошо, универсального решения. На мой взгляд, вы должны просто подумать, что это невозможно. This article был недавно опубликован и предлагает (долгосрочное) решение этой проблемы. Это долгосрочно, потому что это зависит от множества игроков (производителей аппаратного и программного обеспечения) для разработки.

Цитирую автора:

Это смешно, что мы можем послать роботов на Марс пока это все еще практически невозможно оказать глиф на веб-странице и с уверенностью сказать: «Если вы измеряете этот символ на вашем экран с линейкой будет иметь ширину всего в 10 миллиметров ».

Answer 2

Старомодный points должен работать.

Пример:

<style> 
p 
{ 
    font:15pt; 
} 
</style> 

Answer 3

html {font-size: 14px /* in example */} 

это каждый двойников элемент HTML дать относительный размер, что означает

body { font-size: 100% } /* is 14px now */ 

а

div { font-size: 1em } /* should be 14px also */ 

его также можно изменить размер шрифта html с помощью javscript и ll относительные размеры должны работать должным образом. с jQuery вы можете получить доступ к размеру шрифта и установить его в некоторый размер, рассчитанный с экрана. даже работа была бы @media() { your css here } правилами для любого вида приложений на разных устройствах.

var fontsize=14+'px'; 
jQuery('body').css('font-size',fontsize); 

Answer 4

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

Пользователь может установить одновременно 2 монитора и установить их так, чтобы одинаковые элементы экрана отображались на разных размерах на каждом из них.

Answer 5

Вы можете использовать баллы (pt), которые составлены на основе 1/72 дюйма. Это устройство, которое традиционно происходит от печати. Теперь это зависит от того, правильно ли настроено устройство, независимо от того, будет ли этот размер одинаковым от монитора к монитору. Часто это не так, но некоторые устройства знают об их физических размерах экрана. Вы также можете использовать дюймы in, сантиметры cm и миллиметры mm.

Используйте этот размер в сочетании с ems, которые являются относительными размерами. Таким образом, весь сайт может масштабироваться вверх и вниз по мере необходимости.

body { 
    font-size: 12pt; 
} 
h1 { 
    font-size: 2em; 
} 
p { 
    font-size: 1.1em; 
} 

Answer 6

Вы можете использовать см и мм:

<span style="font-size: 2cm;">i am big</span> 
<span style="font-size: 2mm;">i am tiny</span> 

Answer 7

Как уже отмечалось, вы не можете сделать размер шрифта полностью независимым от разрешения экрана. Что вы можете сделать, так это использовать медиа-запросы для разных размеров экрана и соответственно изменить размер шрифта.

body { font-size: 16px; } 
@media screen and (min-width: 600px) { 
    body { font-size: 112.5%; } 
} 
@media screen and (min-width: 800px) { 
    body { font-size: 125%; } 
} 
@media screen and (min-width: 1000px) { 
    body { font-size: 137.5%; } 
} 
@media screen and (min-width: 1200px) { 
    body { font-size: 150%; } 
} 

Это только примерные значения - вам придется экспериментировать с вашим приложением различного размера и видеть, что выглядит лучше всего. Trent Walton's сайт - хороший пример этого - измените размер окна браузера и посмотрите, что произойдет с размером текста.

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