Разрешить пользователю изменять размеры шрифта веб-страницы - ASP.Net

Question

Я хочу предоставить на своем веб-сайте функцию, позволяющую пользователям увеличивать и уменьшать размер шрифта, нажимая некоторые элементы (например, + и - изображение и т. Д.). Однако я также хочу:

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

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

В моем веб-приложении у меня нет жестко заданных размеров шрифта, но в некоторых местах я указал длину текстовых полей, такую ​​как width = 50px, которую, я думаю, нужно изменить. Так какую единицу я должен использовать?

Я думаю об использовании тем и определении размеров шрифта надписей и текстовых полей как маленьких, меньших, больших и т. Д. Не уверен, что это будет работать?

---

Обновление: Я задавал вопрос также на другом форуме: http://forums.asp.net/t/1453926.aspx

По сути, из всех ответов я понял, что есть два подхода:

1. Использовать em и размер основного шрифта: тело { размер шрифта: 62,5%; } п { размер шрифта: 1,2em; }

и когда вам нужно увеличить / уменьшить размер шрифта, просто увеличьте / уменьшите размер основного шрифта в процентах

2. Используйте абсолютные размеры шрифта: css определяет диапазон (7) размеров шрифта от xx-small до xx-large, поэтому вы можете определить font-size: small in css ..

Я нашел хорошую статью об этих размерах шрифта в: http://meyerweb.com/eric/articles/webrev/199908a.html

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

Answer 1

Возможно, вы захотите взглянуть на некоторые опросы, чтобы узнать, является ли это желаемой функцией. Большинство людей, которых я знаю, будут использовать встроенную функциональность своего веб-браузера для управления размером шрифта. В ходе моего собственного тестирования и разработки на различных сайтах большинство клиентов игнорируют элементы управления размером шрифта на сайтах. Может сэкономить вам время в долгосрочной перспективе:)

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

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

Answer 2

Я бы использовал jQuery для этого. Этот вопрос не был точно таким же, но выделенный ответ очень близок к тому, чего вы хотите достичь:

Разрешить пользователям изменять размер шрифта на веб-странице

Это тоже неплохо: http://webrocket.ulmb.com/ability, хотя демоверсия - это маленькие штаны

Answer 3

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

В простом случае с селекторами Jquery измените размер шрифта с помощью css.

function font_resize(act)
{
    if(act=='small')
    {
        $("body").css("font-size","10px");          
        $("#footer").css("font-size","9px");

    }
    else if(act=='mid')
    {
        $("body").css("font-size","12px");
        $("#footer").css("font-size","11px");

    }
    else if(act=='large')
    {
        $("body").css("font-size","15px");
        $("#footer").css("font-size","14px");

    }
}

Answer 4

jQuery, см. Простое изменение размера текста с помощью jQuery