我想为所有浏览器保持导航菜单的字体大小相同。我将导航菜单文本的字体大小设置为特定的像素大小。在 IE 中这有效,但在 FF 中无效。
问题是,如果一个人改变了他们浏览器的字体大小,那么它会完全破坏 FF 中的菜单布局。
有没有办法为 FF 调整这个或者没有办法解决它?我知道它是为了可访问性,但否则会弄乱设计,我宁愿不使用图像而不是导航菜单的文本。
谢谢!
我想为所有浏览器保持导航菜单的字体大小相同。我将导航菜单文本的字体大小设置为特定的像素大小。在 IE 中这有效,但在 FF 中无效。
问题是,如果一个人改变了他们浏览器的字体大小,那么它会完全破坏 FF 中的菜单布局。
有没有办法为 FF 调整这个或者没有办法解决它?我知道它是为了可访问性,但否则会弄乱设计,我宁愿不使用图像而不是导航菜单的文本。
谢谢!
你有三个选择:
如果你试图让一切都固定下来,只为你的眼睛感到高兴,那么你正在打一场你不会赢的战斗。如果内容是供公众消费的,那么请理解公众女士对于她应该阅读的正确字体大小有不同的看法。
浏览器已经发展了很长时间,以阻止您试图阻止人们看到内容。
发展并理解字体大小应该用 CTRL + '+/-' 改变
获得这种控制级别的唯一保证方法是将文本呈现为图像。虽然这对于菜单(不经常更改)来说可以正常工作,但我已经看到它被所有文本都作为图像完成的网站可怕地滥用。
我有一个好朋友,他接受过印刷设计师的培训。当她刚开始做网页设计时,由于缺乏控制,几乎让她发疯。我建议她深呼吸,研究 CSS 盒子模型,然后设计为“正常”字体大小 +/- 1 大小。
问题不在于有人在缩放,客户想要那样,就像他想要的那样,问题是 9pt 字体在 ie 7 和 8 和 chorme 中显示,但在 ff 中没有
还有另一种选择:
使用以下脚本检测用户的字体大小:http ://www.alistapart.com/articles/fontresizing/
然后在“ems”中调整一个容器 div 以补偿用户大小。
例如,如果用户 font-size 为 22,base 为 20,则让您的容器 div 的 font-size 为 20/22(即 22*(20/22)=20)。:)
注意:您需要一个容器 div 的原因是因为您的事件侦听器会注意字体大小对正文的更改。
(这个答案可能会激怒一些可用性专家。对不起那些人。你确实有好点,但答案仍然是答案。:p)
PS。我想我最好附上我的实现代码只是为了证明它有效。我还没有为全局应用程序编辑此代码。它被复制和粘贴...注意诸如用常规浏览器检测条件(例如)替换我的 IE 条件(使用动态添加的 CSS 类)之类的东西。
这很长,但都是必要的:
updateBaseFontSize : function(fontSize,reloadBool){
/*Format 1 is fed from the plug; 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;
var format1Size = fontSize; //equals new size in pixels
var reloadPage = reloadBool; //prevents reload on 1st visit
var baseConverter;
var changeConverter;
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
var format2Base = format1Base * baseConverter;
var format2SizeChange = (format1Size-format1Base)*changeConverter;
var format2NewSize = format2SizeChange + format2Base;
var 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
if ((format2NewSize >= format2Base)&&(modifiedSize>.6)){
$('#fontbodyreadjust').css('font-size',modifiedSize+'em');
}
//reloadPage boolean in place so that reload doesn't occur on first visit
if (reloadPage){
window.location.reload()
}
},
initHome : function(){
// UNHIDE HOME PAGE CONTENT AFTER IT'S LOADED. OTHERWISE, LAYERED AND MESSY
$('#slider').css('display', 'block');
// PREVENT VARIOUS USER BROWSER-FONT RESIZE SCENARIOS
// Note: irrelevant for browsers that zoom all elements simultaneously
window.initFontResizeDetector = function(){
var iBase = TextResizeDetector.addEventListener(onFontResize,null);
//Don't run the updateBaseFontSize if font size is not larger than usual
if (iBase>20){
var reloadBoolean = false;
window.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 = window.initFontResizeDetector;
window.onFontResize = function(e,args) {
var iSize = args[0].iSize; //get new user defined size
// var iDelta = args[0].iDelta; //get new user defined size
// var iBase = args[0].iBase; //get new user defined size
var reloadBoolean = true;
// console.log(iSize,iDelta,iBase);
window.updateBaseFontSize(iSize,reloadBoolean);
}