如何防止用户在我的网站上调整字体大小？

Question

如何防止用户在我的网站上调整字体大小？

Answer 1

实际上,出于可访问性原因,您应该允许字体大小调整.

Answer 2

你不能.字体大小调整发生在客户端,您无法控制.用户可以随意增加或减少字体大小.

如果您担心您的页面标记在较大的字体大小时会中断,那么就忽略它.没有办法创建一个或多或少复杂的设计,以适应任何可能的字体大小变化.如果用户选择使用它,那么如果标记中断则最终是他们的错.但他们可能习惯于看到破页.

无论如何,现代版本的浏览器(IE,FireFox,Opera)只是缩放渲染页面,保持元素的相对比例不变.问题已经解决了.

Answer 3

Two options:

1. Make all your text into images.

2. Detect browser font size changes and base font (when they arrive at your site), then adjust the font size dynamically to compensate for their change.

Here's the javascript for the font-size detector: http://www.alistapart.com/d/fontresizing/textresizedetector.js

And now all you have to do is attach a resize function to the listener and surround all your markup in a div with id, "bodyContent" (that way the font event listener won't catch your compensation functions:

addFontResizeListener = function () {
        var iBase, reloadBoolean;

        iBase = addEventListener(lzaIndex.onFontResize, null);

        //Don't run the updateBaseFontSize if font size is not larger than usual
        if (iBase > 20) {
            reloadBoolean = false;
            updateBaseFontSize(iBase, reloadBoolean);
        }
    };

    //id of element to check for and insert control
    TextResizeDetector.TARGET_ELEMENT_ID = 'bodyContent';
    //function to call once TextResizeDetector has init'd
    TextResizeDetector.USER_INIT_FUNC = addFontResizeListener;

    onFontResize = function (e, args) {
        var iSize, reloadBoolean;

        iSize = args[0].iSize; //get new user defined size

        reloadBoolean = true;
        updateBaseFontSize(iSize, reloadBoolean);
    };

Then add the readjustment itself:

updateBaseFontSize : function (fontSize, reloadBool) {
    /*Format 1 is fed from the plugin; format2 is the body size equiv
     *examples:
     *Frmt 1 (all/IE) | Frmt 2 (all/IE)
     *20/18           | 16px/16px
     *21/21           | 17.6px/19px
     *22/23           | 19.2px/22px
     *
     *Purpose of updateBaseFontSize is:
     * 1. convert format 1 figures to format 2
     * 2. modify the all containing div 'fontbodyreadjust'
     *    to compensate for the new user defined body font size
     */


    var format1Base, format1Size, reloadPage, baseConverter, changeConverter,
    format2Base, format2SizeChange, format2NewSize, modifiedSize;

    format1Size = fontSize; //equals new size in pixels
    reloadPage = reloadBool; //prevents reload on 1st visit

    if ($('body').hasClass('browserIE')) {
        format1Base = 19; //expected base size value for IE
        baseConverter = 16 / 19; //converts from format 1 to 2 for IE
        changeConverter = 1.5; //ditto for the difference from base size for IE
    } else {
        format1Base = 20;//expected base size value for all other browsers
        baseConverter = 16 / 20; //converts from format 1 to 2 for all others
        changeConverter = 1.6; //ditto for the difference from base size for all others
    }

    //Find modifiedSize, how much to compensate for the new body size
    format2Base = format1Base * baseConverter;

    format2SizeChange = (format1Size - format1Base) * changeConverter;
    format2NewSize = format2SizeChange + format2Base;

    modifiedSize = format2Base / format2NewSize;

    //Allow text resizing for shrinking text and very very large text
    //Only works for safari. meant to prevent odd behavior at math extremes
    jFontBodyReadjust = $('#fontbodyreadjust');

    if ((format2NewSize >= format2Base) && (modifiedSize > 0.6)) {
        jFontBodyReadjust.css('font-size', modifiedSize + 'em');
    }

    //reloadPage boolean in place so that reload doesn't occur on first visit
    if (reloadPage) {
        window.location.reload();
    }
}

REMEMBER: Provide an alternative to those who can't see your defined font size. It's the right thing to do. You can put access to your alternative (e.g., via a pop-up question) within the if (iBase > 20)

PS. Also remember you can specify ALL of your element widths (images, etc.) in ems so that font resize adjusts everything, BUT it's a bit messy, there are different browser interpretations that must be compensated for, and you can't use sprites (because ems would just show more of the sprite subsection that you want.

PSS. Specifying in px won't do you any good on modern browsers...don't know why that seems to be a popular answer here.

Answer 4

如何将文本转换为图像.

Answer 5

以PDF格式发布.正如其他人所说,HTML并非设计为打印介质