%~d0
дает вам букву диска аргумента 0 (имя скрипта), %~p0
путь.
РЕДАКТИРОВАТЬ: Если контейнер не является телом CSS Tricks охватывает все ваши варианты здесь: https://css-tricks.com/fitting-text-to-a-container/
Если контейнер является телом, то вы ищете Процент длины просмотра :
Процентная длина в окне просмотра зависит от размера исходного блока , содержащего блок . Когда изменяется высота или ширина исходного содержащего блока, они соответственно масштабируются. Однако, когда значение переполнения корневого элемента авто, любые полосы прокрутки, как предполагается, не существуют.
Значения:
vw
(% ширины окна просмотра)vh
(% от области просмотра высота)vi
(1% от размера окна просмотра в направлении внутренней оси корневого элемента)vb
(1% от размера окна просмотра в направлении ось блока корневого элемента)vmin
(меньшеvw
илиvh
)vmax
(больше илиvw
илиvh
),1 v * равно 1% от исходного содержащего блока.
, используя его, выглядит так:
p { font-size: 4vw; }
Как вы может видеть, когда ширина видового экрана увеличивается, так же как и размер шрифта, без необходимости использования медиа-запросов.
Эти значения являются единицами калибровки, как
px
илиem
, поэтому они могут (g22)Поддержка браузера довольно хороша, но вам, вероятно, потребуется резервное копирование, например:
p { font-size: 16px; font-size: 4vw; }
Проверьте статистику поддержки: http://caniuse.com/#feat=viewport-units .
Также посмотрите CSS-Tricks для более широкого вида: http://css-tricks.com/viewport-sized-typography/
Вот хорошая статья о настройке минимальных / максимальных размеров и немного больший контроль над размерами: http://madebymike.com.au/writing/precise-control-responsive-typography/
И вот статья о настройке вашего размера с помощью calc (), чтобы текст заполнил область просмотра: http://codepen.io/CrocoDillon/pen/fBJxu
Кроме того, просмотрите эту статью, которая использует технику, получившую название «расплавленный ведущий», чтобы отрегулировать высоту линии. https://css-tricks.com/molten-leading-css/
Есть способ сделать это БЕЗ javascript!
Вы можете использовать встроенный svg. Вы можете использовать css на svg, если он встроен. Вы должны помнить, что использование этого метода означает, что ваш svg ответит на его размер контейнера.
Попробуйте использовать следующее решение ...
HTML
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>
CSS
div {
width: 50%; /* set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}
пример: https://jsfiddle.net/k8L4xLLa/32/
Хотите что-нибудь более кричащее?
SVG также позволяют вам делать классные вещи с фигурами и мусором. Проверьте этот замечательный вариант использования для масштабируемого текста ...
Моя проблема была похожа, но связана с масштабированием текста внутри заголовка. Я попробовал Fit Font, но мне нужно было переключить компрессор, чтобы получить какие-либо результаты, поскольку он решал немного другую проблему, как и Text Flow. Поэтому я написал свой собственный небольшой плагин, который уменьшает размер шрифта, чтобы он соответствовал контейнеру, предполагая, что у вас есть overflow: hidden
и white-space: nowrap
, так что даже если сокращение шрифта до минимума не позволяет показывать полный заголовок, он просто отключается что он может показать.
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);
взгляните на мой код, он делает font size smaller
на fit
там, где есть
, но я думаю, что это не привело к хорошему опыту пользователя
var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
//display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
$(this).css({"whiteSpace":"nowrap","display":"inline-block"});
while ($(this).width() > containerWidth){
console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
$(this).css("font-size", fontSize -= 0.5);
}
});
надеюсь, что это поможет вам
Внутри CSS попробуйте добавить это внизу, изменяя ширину 320 пикселей, где бы ни начинался ваш дизайн:
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
Затем укажите размер шрифта в «px» или «em», как вы пожелаете .
Существует большая философия для этой проблемы. Проще всего сделать это, чтобы дать определенный размер шрифта телу (i recommand 10), а затем весь другой элемент будет иметь свой шрифт в em или rem. Я дам вам и пример, чтобы понять эти единицы. Em всегда относится к своему родителю
body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */
Rem всегда относится к телу
body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */
И чем вы могли бы создать скрипт, который изменил бы размер шрифта относительно вашего контейнера ширина. Но это не то, что я бы рекомендовал. Потому что в контейнере ширины 900px, например, у вас будет элемент p
с размером шрифта 12px, скажем так. И на вашей идее, которая станет на контейнере шириной 300 пикселей с размером шрифта 4px. Должен быть нижний предел. Другие решения были бы с медиа-запросами, так что вы могли бы установить шрифт для разных ширины.
Но решения, которые я бы рекомендовал, это использовать библиотеку javascript, которая поможет вам в этом. И fittext.js , который я нашел до сих пор.
rem
относится к корневому элементу, то есть к элементу html
, а не к элементу body
. Корневым элементом в DOM является тег html
. developer.mozilla.org/en-US/docs/Web/CSS/length .. rem
всегда относится к тегу html
, который является корневым элементом, а не тегом body. но хороший ответ :)
– Jonathan Marzullo
12 January 2016 в 19:19
Попробуйте использовать плагин fitText , потому что размеры видовых экранов не являются решением этой проблемы. Просто добавьте библиотеку
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
и измените размер шрифта, чтобы скорректировать по настройкам коэффициент текста:
$("#text_div").fitText(0.8);
вы можете установить max и min значения текста:
$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });
Решение с SVG:
<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
Чтобы размер шрифта соответствовал его контейнеру, а не окно, см. функцию resizeFont()
, которую я поделил в этом вопросе (комбинация других ответов, большинство из которых уже связаны здесь).
Vanilla JS: Изменить размер шрифта - удивительный, чтобы соответствовать контейнеру
function resizeFont() {
var elements = document.getElementsByClassName('resize');
console.log(elements);
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + '%';
}
}
}
] Возможно, вы можете использовать vw / vh как резерв, поэтому вы динамически назначаете блоки em
или rem
с помощью javascript, гарантируя, что шрифты будут масштабироваться до окна, если javascript отключен.
Применить .resize
для всех элементов, содержащих текст, который вы хотите масштабировать.
Запустите функцию перед добавлением слушателя событий изменения размера окна. Затем любой текст, который не соответствует его контейнеру, будет уменьшен при загрузке страницы, а также при изменении размера.
ПРИМЕЧАНИЕ. Значение по умолчанию font-size
должно быть установлено как em
, rem
или %
для достижения правильных результатов ... и если стиль ваших элементов слишком сложный, браузер может упасть, если вы начнете отчаянно изменять размер окна.
То, что я делаю в одном из моих проектов, - это «смесь» между vw и vh, чтобы настроить размер шрифта на мои нужды, например ::
font-size: calc(3vw + 3vh);
Я знаю, что это не отвечает op, но, возможно, это может быть решением для всех остальных.
Я подготовил простую функцию масштабирования, используя css transform вместо font-size. Вы можете использовать его внутри любого контейнера, вам не нужно устанавливать медиа-запросы и т. Д.:)
Сообщение в блоге: https://blog.polarbits.co/2017/03/07/ full-width-css-js-scalable-header /
Код:
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
Рабочая демонстрация: https://codepen.io/ maciejkorsan / ручка / BWLryj
Всегда используйте свой элемент с этим атрибутом:
Javascript: element.style.fontSize = "100%";
или
CSS: style = "font-size: 100%;"
Когда вы идете в полноэкранный режим, вы уже должны иметь вычисляемую переменную масштаба (масштаб> 1 или масштаб = 1). Затем на полноэкранном режиме:
document.body.style.fontSize = (scale * 100) + "%";
Он отлично работает с небольшим кодом.
Это сработало для меня:
Я пытаюсь приблизиться к размеру шрифта на основе ширины / высоты от установки размера шрифта: 10 пикселей. В основном идея: «Если у меня ширина 20px и высота 11px с размером шрифта: 10px, то каков будет максимальный размер шрифта для математического контейнера с шириной 50px и высотой 30px?»
ответ - система с двойной пропорцией:
{20: 10 = 50: X, 11: 10 = 30: Y} = {X = (10 * 50) / 20, Y = (10 * 30) / 11}
Теперь X - размер шрифта, который будет соответствовать ширине, Y - размер шрифта, который будет соответствовать высоте; возьмите наименьшее значение
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)el_w = 0;
//0.5 is the error on the measure that js does
//if real measure had been 12.49 px => js would have said 12px
//so we think about the worst case when could have, we add 0.5 to
//compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
NB: аргумент функции должен быть элементом span или элементом, который меньше, чем родительский, в противном случае, если дети и родитель имеют одинаковые функции ширины и высоты, неудачу
Для динамического текста этот плагин весьма полезен http://freqdec.github.io/slabText/ . Просто добавьте css
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
и скрипт
$('#mydiv').slabText();
Вы пробовали http://simplefocus.com/flowtype/ ?
Это то, что я использую для своих сайтов и отлично работаю. Надеюсь, что это поможет.
В случае, если это полезно для всех, большинство решений в этом потоке были обертыванием текста на несколько строк, формы e.
Но потом я нашел это, и он работал:
https://github.com/chunksnbits/jquery-quickfit
Пример использования:
$('.someText').quickfit({max:50,tolerance:.4})
Этот веб-компонент изменяет размер шрифта, поэтому ширина внутреннего текста соответствует ширине контейнера. Проверьте demo .
Вы можете использовать его следующим образом:
<full-width-text>Lorem Ipsum</full-width-text>
Это может быть не очень практично, но если вы хотите, чтобы шрифт был прямой функцией родителя, без какого-либо JS, который прослушивает / цикл (интервал) для чтения размера div / страницы, существует способ сделай это. Iframes. Все, что находится внутри iframe, будет рассматривать размер iframe как размер окна просмотра. Таким образом, трюк состоит в том, чтобы просто создать iframe, ширина которого является максимальной шириной, которую вы хотите, чтобы ваш текст был, и высота которого равна максимальной высоте * пропорции конкретного текста.
Отменив ограничение, которое единицы просмотра не могут также поступать вдоль боковых родительских блоков для текста (как и в случае, когда размер% ведет себя как все остальные), блоки видового экрана предоставляют очень мощный инструмент: возможность чтобы получить размер min / max. Вы не можете сделать это где-нибудь еще - вы не можете сказать ... сделайте высоту этого div, чтобы ширина родительского * что-то.
Как говорится, трюк заключается в использовании vmin и установке размера iframe, так что общая высота [fraction] * является хорошим размером шрифта, когда высота является предельным размером, а [fraction] * общая ширина, когда ширина является предельной величиной. Вот почему heigh должен быть продуктом ширины и пропорции.
для моего конкретного примера у вас есть
.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0,0,0,0);
border-style: none;
transform: translate3d(-50%,-50%,0);
}
. Небольшое раздражение этим методом заключается в том, что вам нужно вручную установить CSS iframe. Если вы прикрепляете весь файл CSS, это потребует большой пропускной способности для многих текстовых областей. Итак, что я делаю, это правило, которое я хочу получить непосредственно из моего CSS.
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);
Вы можете написать небольшую функцию, которая получает правило CSS / все правила CSS, которые влияют на текстовую область.
Я не могу придумать другой способ сделать это, не имея какого-нибудь велосипедного / прослушивающего JS. Реальное решение будет заключаться в том, чтобы браузеры предоставляли способ масштабирования текста как функции родительского контейнера AND, а также предоставляли те же функции типа vmin / vmax.
JS fiddle: https: // jsfiddle.net/0jr7rrgm/3/ (нажмите один раз, чтобы заблокировать красный квадрат мыши, щелкните еще раз, чтобы отпустить)
Большая часть JS в скрипке - это просто мое пользовательское перетаскивание мышью функция
100% относится к базовому размеру шрифта, который, если вы его не установили, будет пользовательским агентом браузера по умолчанию.
Чтобы получить эффект, который вам нужен, я бы использовал кусок javascript для настройки размера базового шрифта относительно размеров окна.
Вы ищете что-то вроде этого? => http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/ У меня есть использовал flowtype , и он отлично работает (однако это js, а не чистое решение css)
$('body').flowtype({
minFont : 10,
maxFont : 40,
minimum : 500,
maximum : 1200,
fontRatio : 70
});
Я не вижу никакого ответа со ссылкой на свойство flex flex, но это может быть очень полезно.
В качестве резервной копии JavaScript (или вашего единственного решения) вы можете использовать мой плагин jQuery Scalem , который позволяет масштабировать относительно родительского элемента (контейнера), передавая параметр reference
.
Обновлено, потому что я получил пониженное голосовое сообщение.
Вот функция:
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
Затем преобразуйте все размеры дочерних элементов вашего документа в em или%.
Затем добавьте что-то подобное вашему коду, чтобы установить размер базового шрифта.
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
calc()
, единицами CSS и математикой Это точно не то, что ОП спрашивает, но может сделать чей-то день.
Я пришел, наконец, для получения чистого CSS-решения для этого, используя calc()
с разными единицами. Вам понадобится некоторое базовое математическое понимание формул, чтобы выработать выражение для calc()
.
Когда я это проработал, мне пришлось получить отчетный заголовок с полной шириной страницы с несколькими дополнениями нескольких родителей в DOM. Я буду использовать мои значения здесь, замените их на свой.
Вам понадобится:
padding: 3em
и полная ширина, так что это дошло до 100wv - 2 * 3em
X - это ширина контейнера, поэтому замените его собственным выражением или настройте значение, чтобы получить полнотекстовый текст. R - отношение, которое у вас будет. Вы можете получить его, отредактировав значения в каком-либо окне просмотра, проверив ширину и высоту элемента и заменив их собственными значениями. Кроме того, это width / heigth
;)
x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7
И звук! Это сработало! Я написал
font-size: calc((75vw - 4.5rem) / 7)
в свой заголовок, и он прекрасно поменялся в каждом окне просмотра.
Нам нужны некоторые константы здесь. 100vw
означает полную ширину окна просмотра, и моя цель состояла в том, чтобы установить заголовок полной ширины с некоторым дополнением.
Отношение. Получение ширины и высоты в одном окне просмотра показало мне соотношение, с которым можно играть, и с коэффициентом я знаю, какая высота должна быть в другой ширине видового экрана. Вычисление их вручную потребует много времени и, по крайней мере, возьмет много полос пропускания, так что это не очень хороший ответ.
Интересно, почему никто не понял это, а некоторые люди даже говорят, что это невозможно будет переделать с помощью CSS. Я не люблю использовать Javascript в настройке элементов, поэтому я не принимаю ответы JS или даже jQuery, не копая больше. В целом, хорошо, что это выяснилось, и это один шаг к реализации чистых CSS в дизайне сайтов.
Извиняюсь за любое необычное соглашение в моем тексте, я не являюсь носителем языка на английском, а также совершенно новым для написания SO-ответов.
Edit: следует также отметить, что мы имеют злые полосы прокрутки в некоторых браузерах. Например, при использовании Firefox я заметил, что 100vw
означает полную ширину окна просмотра, проходящую под полосой прокрутки (где контент не может расширяться!), Поэтому текст ширины полосы пропускания должен быть тщательно окрашен и желательно проходить тестирование со многими браузерами и устройствами.
x
равна 640px и отношению r
16: 9, поэтому: x = 640px, r = 16 / 9, y = x / r = 640px / (16 / 9) = 360px
– hegez
18 May 2017 в 13:36
Этот вопрос задается в комментарии Alex по принятому ответу.
Этот факт не означает, что vw
не может использоваться в некоторой степени для размера для этого контейнера. Теперь, чтобы увидеть какие-либо вариации, нужно учитывать, что контейнер каким-то образом является гибким по размеру. Через прямой процент width
или через 100% минус маржи. Дело становится «спорным», если контейнер всегда устанавливается, скажем, 200px
широко - то просто установить font-size
, который работает для этой ширины
Пример 1
[. g11] Однако при использовании контейнера с гибкой шириной необходимо убедиться, что в какой-то мере контейнер все еще имеет размер в окне просмотра . Таким образом, это вопрос настройки параметраvw
, основанного на том, что разница в процентах в окне просмотра, что означает учет размера родительских оберток. Возьмем этот пример :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Предполагая, что div
является дочерним элементом body
, это 50%
этой ширины 100%
, которая является размер видового экрана в этом базовом случае. В принципе, вы хотите установить vw
, который будет хорошо выглядеть для вас. Как вы можете видеть в моем комментарии в приведенном выше css, вы можете «мыслить» математически по отношению к полному размеру видового экрана, но вам не нужно делать это. Текст будет «гибким» с контейнером, потому что контейнер сгибается с изменением размера видового экрана. UPDATE: вот пример двух контейнеров различного размера .
Пример 2
Вы можете помочь обеспечить размер видового экрана, заставив вычисление основываться на этом. Рассмотрим этот пример :
html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 200% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Калибровка по-прежнему основана на видовом экране, но по существу создана исходя из самого размера контейнера.
Если размер элемента контейнера в конечном итоге динамически изменил его процентное соотношение либо через @media
точки останова, либо через javascript, то какая бы базовая «цель» не была нужна пересчет для поддержания того же «отношения» для размера текста.
Возьмите пример № 1 выше. Если div
был переключен на ширину 25%
либо на @media
, либо на javascript, то в то же время font-size
нужно будет отрегулировать либо запрос на медиа, либо javascript для нового вычисления 5vw * .25 = 1.25
, Это поместило бы размер текста в том же размере, что и ширина «оригинала» 50%
была бы уменьшена наполовину от размера видового экрана, но теперь была уменьшена из-за изменения собственного процентного расчета.
Задача
С помощью используемой функции CSS3 calc()
было бы сложно настроить динамически, поскольку эта функция не работает для font-size
в настоящее время. Таким образом, вы не сможете выполнить чистую настройку CSS3, если ваша ширина меняется на calc()
. Конечно, незначительная корректировка ширины для полей может быть недостаточной, чтобы гарантировать любое изменение в font-size
, поэтому это может не иметь значения.
@media
, чтобы изменить размер шрифта в этой точке (по существу, придав ему фиксированный размер при достижении max-width
). Просто мысль работать с ситуацией max-width
.
– ScottS
14 November 2014 в 17:26
Мое собственное решение, основанное на jQuery, работает, постепенно увеличивая размер шрифта, пока контейнер не получит большое увеличение высоты (что означает, что он получил разрыв строки). Это довольно просто, но работает достаточно хорошо, и он очень прост в использовании. Вам не нужно ничего знать о шрифте, который используется браузером.
Вы можете играть с ним на http://jsfiddle.net/tubededentifrice/u5y15d0L / 2 /
Волшебство происходит здесь:
var setMaxTextSize=function(jElement) {
//Get and set the font size into data for reuse upon resize
var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
jElement.data(quickFitFontSizeData,fontSize);
//Gradually increase font size until the element gets a big increase in height (ie line break)
var i=0;
var previousHeight;
do
{
previousHeight=jElement.height();
jElement.css("font-size",""+(++fontSize)+"px");
}
while(i++<300 && jElement.height()-previousHeight<fontSize/2)
//Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
fontSize-=1;
jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");
return fontSize;
};
Использование vw
, em
& amp; сотрудничество. работает наверняка, но imo всегда нуждается в прикосновении человека для тонкой настройки.
Вот сценарий, который я только что написал на основе @ tnt-rox ' answer , который пытается автоматизировать этот touch:
$('#controller').click(function(){
$('h2').each(function(){
var
$el = $(this),
max = $el.get(0),
el = null
;
max =
max
? max.offsetWidth
: 320
;
$el.css({
'font-size': '1em',
'display': 'inline',
});
el = $el.get(0);
el.get_float = function(){
var
fs = 0
;
if (this.style && this.style.fontSize) {
fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
}
return fs;
};
el.bigger = function(){
this.style.fontSize = (this.get_float() +0.1) +'em';
};
while ( el.offsetWidth < max ) {
el.bigger();
}
// finishing touch.
$el.css({
'font-size': ((el.get_float() -0.1) +'em'),
'line-height': 'normal',
'display': '',
});
}); // end of ( each )
}); // end of ( font scaling test )
div {
width: 50%;
background-color: tomato;
font-family: 'Arial';
}
h2 {
white-space: nowrap;
}
h2:nth-child(2) {
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
<h2>Lorem ipsum dolor</h2>
<h2>Test String</h2>
<h2>Sweet Concatenation</h2>
<h2>Font Scaling</h2>
</div>
В основном уменьшает размер шрифта до 1em
, а затем начинает увеличиваться на 0,1 до он достигает максимальной ширины.
Если проблема заключается в том, что шрифт становится слишком большим на широкоэкранном рабочем столе, я думаю, что самый простой метод css был бы примерно таким (предполагая, что обертка max 1000px wide)
.specialText{
font-size:2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width:24px;
}
}
. Таким образом, он автоматически задается для любого экран меньше максимальной ширины вашего контейнера и фиксированный размер, когда экран шире (например, практически все настольные / ноутбуки)
FitText.js
, предоставленную в нижней части статьи @jbenjohnson. – Robbert 6 November 2013 в 16:44