Два варианта:
Превратите весь ваш текст в изображения.
Обнаружение изменений размера шрифта браузера и базового шрифта (когда они поступают на ваш сайт), затем динамическая настройка размера шрифта для компенсации их изменения.
Вот код JavaScript для детектора размера шрифта: http://www.alistapart.com/d/fontresizing/textresizedetector.js
И теперь все, что вам нужно сделать, это прикрепить функцию изменения размера к слушателю и окружить всю вашу разметку в div с идентификатором "bodyContent" (таким образом слушатель события шрифта не поймает ваши функции компенсации:
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);
};
Затем добавьте саму перенастройку:
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();
}
}
ПОМНИТЕ: Предоставьте альтернативу тем, кто не видит ваш определенный размер шрифта. Это правильно. Вы можете поместить доступ к своей альтернативе (например, через всплывающий вопрос) в if (iBase > 20)
PS. Также помните, что вы можете указать ВСЕ ширины вашего элемента (изображения и т. Д.) В ems, чтобы изменение размера шрифта регулировало все, НО это немного грязно, есть разные интерпретации браузера, которые должны быть компенсированы, и вы не можете использовать спрайты ( потому что ems просто покажет больше нужного вам спрайта.
PSS. Указание px не поможет вам в современных браузерах ... не знаю, почему это кажется популярным ответом здесь.