How to prevent users from resizing the font on my

问题:

How to prevent users from resizing the font on my web site?

回答1:

In fact, you should allow font resizing for accessibility reasons.

回答2:

You can't. Font resizing takes place on the client side over which you simply have no control. Users are free to increase or decrease the font size as they please.

If you're worried about your page markup breaking at bigger font sizes, then simply ignore it. There is no way to create a more or less sophisticated design resilient to any possible font size variation. And if the user chooses to play around with it, then it's ultimately their fault if the markup breaks. But they are likely accustomed to seeing broken pages already.

Anyway, modern versions of browsers (IE, FireFox, Opera) simply scale the rendered page leaving relative proportions of elements intact. The problem is solved.

回答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.

回答4:

what about converting your text to image.

回答5:

Publish as PDF. As others have said, HTML was not designed as a print medium

回答6:

Technically you cant, but what you can do is:

1. Recreate everything into flash site
2. Disable zoom-in, or right-click menu when embed your flash to your site. (just google how to disable the right-click menu, very easy, something like, "allow-menu=false"

Thats it. MOST of users cant resize the font now, unless they know how to hack =)

Do it, if you: 1. Have lots of time 2. Want to experiment new things 3. Dont mind waste your time and energy (lol)

回答7:

While generally a bad idea, the situation is not as clear cut as previously mentioned.

As of now (Sep 2012), it currently is possible to prevent users of Google Chrome and Safari from resizing the rendered font. The method below, is provided for the sake of completeness, and to raise awareness. Please avoid the temptation to utilize this folks, as it seriously breaks usability and accessibility guidelines.

p {
     -webkit-text-size-adjust:none;
  }

As per this Mozzila discussion, the extension was intended for mobile, but it unfortunately worked its way into the WebKit powered desktop browsers.

It is non-standard, and hence a prefix must be used. The corresponding extensions for Firefox and IE, -moz-text-size-adjust and -ms-text-size-adjust, are appropriately behaved.

Additionally, there is a WebKit bug logged regarding the issue.

---

Example:

There has been horrible abuse of this, on a number of sites. Facebook's Social plugin, is one such case.

• FB comments on Techcrunch

Viewing the above link, in Safari or Chrome, will currently not allow resizing via Ctrl+ _[Lin/Win] or ⌘+_{[OS X]}

回答8:

You can't do that. Browser's "zoom" controls are not in the power of the developer to adjust. Besides, the "font" will be different based on different screen resolutions (if your font size is in pixels, for example).

回答9:

Its the law in the UK that you should not provide a website/service that restricsts access to those with disabilities.

From 1st October 1999 a service provider has to take reasonable steps to change a practice which makes it unreasonably difficult for disabled people to make use of its services

Disabilty Act

Although this law is not enforced, it is seen as "The Code of Practice which specifically mentions websites".

Its only a 'code of practice', and not everyone follows it.

回答10:

I guess what you really want is to keep the image-text-ratio as it is, because your customer insists that the user gets a consistent, fixed layout (even though you tried to tell him that this is not how the web works).

In that case, an easy workaround is to specify font sizes in px units in CSS. That way, the user will still be able to use the zoom function of his browser, but the relationship of your 15px font to your 150px image will always be constant, independent of the user's font size or dpi settings.

回答11:

Specify font sizes in pixels. I don't recommend it though.