Хранение разных шрифтов на одной строке в пределах фиксированной ширины

Question

Я делаю очень простую веб-страницу, состоящую из текста внутри фиксированной ширины. Вот пример html

<div id ="wrap">
    <h1>An Annoying Heading</h1>
    <p>Some text some text some text some text some text some text some text some text some text some text</p>
</div>

Это единственное, что есть в тегах body. CSS это

*{
  padding: 0;
  margin: 0; 
}    
#wrap{
  width: 320px;
  margin: 50px auto;
}
body{
  font-family: calibri,tahoma,arial,sans-serif;
}
p{
  text-align: justify;
  font-size: 12pt;
  padding-top: 0.4em;
}
h1 {
  padding-bottom: 0.1em;
  font-size: 26pt;
}

Я хочу, чтобы заголовок занимал всю доступную ширину.

Я могу указать размер шрифта, чтобы он приблизительно соответствовал ширине div, что обычно нормально работает.

Однако, если браузер не может использовать calibri, он смотрит на семейство шрифтов, чтобы решить, что использовать вместо этого. Досадно, что следующие шрифты отображаются в большем размере для калибровки, а заголовок разделен на две строки вместо одной.

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

Answer 1

Я не верю, что в настоящее время есть какие-либо средства CSS для настройки размера шрифта, чтобы соответствовать фиксированной ширине, поэтому я думаю, что вам нужно будет использовать решение JavaScript. Следующий вопрос, похоже, содержит всю информацию, необходимую для того, чтобы это произошло:

Как вы можете измерить пространство, которое текст займет в Javascript?

Answer 2

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

Другой вариант заключается в том, чтобы найти промежуточный размер, а затем добавить text-align: justify;, чтобы немного разбросать вещи.

Answer 3

Вы можете использовать некоторую библиотеку JS (например, jQuery), чтобы определить максимальный размер шрифта, и установить его для контейнеров, содержащих меньший текст. Таким образом, Вы закончите в одной строке одинакового размера с другим шрифтом, или Вы также можете динамически изменять шрифты.