Текстовое перекрытие в CSS

Question

Просто быстрый вопрос - я не смог найти это, когда искал, но мне жаль, если это повторение.

У меня есть пункт теги ограждающих название моего сайта:

<div class = "title"> 
    <p>Welcome to homepage!</p> 
</div> 

<div class = "subtext"> 
    <p> Subtext goes here </p> 
</div> 

<div class = "formthing"> 
    <form method = "GET" action = "/form"> 
    <input type = "submit" name = "submitted" class = "btn-large" value = "Click button" /> 
    </form> 
</div> 

и все работает отлично. Однако, когда я увеличиваю масштаб страницы, слова названия накладываются друг на друга. Есть ли что-нибудь, что я могу добавить в CSS, чтобы это не произошло?

Answer 1

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

например:

<style> 
.formthing { 
margin: 0.25em; 
} 
</style> 

Answer 2

Вы должны использовать em шрифта размера в вашем CSS. Если вы не знаете, что это такое, это действительно хорошая статья о нем: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

По сути em это просто еще один способ выразить в процентах, но некоторые браузеры дрогнут при более высоких и более низких уровнях масштабирования при использовании pt, px и % значений. Использование em смягчает эту проблему.

font-size: 16px; 
font-size: 100%; 
font-size: 1em; 

Большинство современных браузеров по умолчанию 16px размера шрифта в качестве контроля и регулировки от этого, делая выше 3 размера шрифта равны друг другу (давать или принимать несколько десятичных знаков в Firefox и IE). Это не безупречно, но по большей части поможет вам в этих ситуациях. Это очень широко практикуемый и проверенный метод предотвращения неожиданного текста и перекрытия элементов.

Кроме того, возможно, вы захотите изучить шрифт, который вы используете, и примените ли кернинг и, возможно, используете letter-spacing: 1px; и настройте соответствующим образом.

Не забудьте использовать сброс CSS, например Normalize.css.