Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/23: Рейтинг темы: голосов - 23, средняя оценка - 4.57
montukxd
8 / 8 / 3
Регистрация: 21.02.2014
Сообщений: 71
#1

Масштабируемый шрифт

11.07.2014, 22:56. Просмотров 4186. Ответов 6
Метки нет (Все метки)

http://montuk.tmweb.ru/ - верстаю адаптивный дизайн, проблема с масштабируемостью шрифтов
т.е. все элементы при изменении разрешения стоят на своем месте, а шрифты увеличиваются, кто знает как исправить?
Проверяю на всех разрешениях тут - http://quirktools.com/screenfly/
Все впорядке, только шрифты подводят
Уже возникают мысли делать их картинками
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.07.2014, 22:56
Ответы с готовыми решениями:

не масштабируемый фон
Допустим мы замостили фон некоторой картинкой (background), а вот как сделать...

Масштабируемый div в соответствии с пропорциями экрана
Ребят,помогите,пожалуйста,хотел воспользоваться вот этой...

Шрифт
Здравствуйте! У меня появилась проблема... я не могу интегрировать шрифт. В...

шрифт
как сделать такой же шрифт?

Не подключается шрифт
Почему может не подключаться шрифт? На скриншоте вроде подключен, но...

6
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
12.07.2014, 07:18 #2
Ну, вы очень хорошо перевели все блоки в относительные единицы, а шрифты то почему в px?
0
Дмитрий76
8 / 8 / 2
Регистрация: 11.07.2014
Сообщений: 69
12.07.2014, 07:43 #3
Как это шрифты увеличиваются? Шрифты остаются какими и были. Просто блоки наплывают друг на друга.
А происходит это из за правила
CSS
1
2
3
.sub_main_block {
  height: 30%;
}
Замени на
CSS
1
2
3
.sub_main_block {
  min-height: 30%;
}
И заголовки тоже сделай текстом, а не картинками. Смысл адаптивной верстки не в том, чтобы все элементы уменьшались пропорционально друг другу и на маленьких экранах становились едва различимыми .

Добавлено через 7 минут
Цитата Сообщение от Дмитрий76 Посмотреть сообщение
CSS
1
2
3
4
Замени на
.sub_main_block {
 min-height: 30%;
}
Хотя лучше вообще убрать высоту. Пусть высота определяется автоматически. А отступы блоков друг от друга задать через свойство margin-bottom.
1
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
12.07.2014, 07:44 #4
Мне кажется что в том то и проблема, что они остаются какими были, а должны увеличиваться, из за этого у нас на большом масштабе все блоки огромные, а шрифты так и остаются 20px (и на оборот)
0
troayn32
25 / 25 / 8
Регистрация: 18.09.2011
Сообщений: 130
12.07.2014, 08:44 #5
Используйте относительные единицы измерения для font-size. А потом в @media ставьте разный font-size для body в зависимости от разрешения экрана
1
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,803
Записей в блоге: 2
13.07.2014, 08:46 #6
Лучший ответ Сообщение было отмечено montukxd как решение

Решение

Размер шрифта в зависимости от разрешения экрана

Javascript
1
2
3
4
5
6
<script type="text/javascript">
var proportion = 860/14;
function resizeFont() { document.body.style.fontSize = parseInt(document.body.offsetWidth/proportion) + 'px' }
onload = onresize = resizeFont;
if (document.addEventListener) document.addEventListener("DOMContentLoaded", resizeFont, null);
</script>
А единицы нужным шрифтам уже задаете в em
1
montukxd
8 / 8 / 3
Регистрация: 21.02.2014
Сообщений: 71
13.07.2014, 20:25  [ТС] #7
Всем спасибо, всё шикарно работает, воспользовался способом Taatshi.
0
13.07.2014, 20:25
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.07.2014, 20:25

Не меняет шрифт
В элементе на строке 85, если указываю font-style: 'любой', то почему-то то...

Шрифт не подгружается
Пытаюсь использовать на двух сайтах один и тот же шрифт. Путь к файлу шрифта...

Жирный шрифт в IE
Всем доброго времени суток! Есть сайт http://officesport.ru/ В опере, хроме,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru