跨浏览器准确控制字体大小 [英] Controlling font size accurately across browsers
问题描述
我有一个重建的大型商业网站，其设计是由像素计数方法生成的.b $ b。它也是其中一个网站
，其中填充每个充满内容的空间被认为比使用一些滚动的更多
展开和可用设计更好。毫不奇怪
这是纸质杂志设计师的工作，而不是网页设计师。
这让我有几个相互矛盾的要求：
- 文章的正文文本大小。页面应该是1em，因为
众所周知的可用性原因。
- 索引页面可能需要基于像素的字体大小控制，
因为否则我不能限制文本以适应可用的
空间。这些空间是固定的像素宽度 - 它们通常是位图图像的大小。另外，它们通常是标题文本。这意味着
一些简短的单词和一些线条包装的笨重行为。
- 它必须跨浏览器工作，包括IE6和IE / Mac
这里真正的问题是IE将整个分开。由于它具有众所周知的ems到像素默认缩放比例的问题，我可以为行为良好的浏览器提供良好的实现（即使在
Mac）但是只有当用户的
文本大小减小到较小时，页面的任何IE渲染才有效。如果我尝试
来使用< h *>这是特别糟糕的标记，差异特别明显。
有什么建议吗？
有没有CSS hack基于技术，我可以设置一个
的默认大小为1em / 100％的网页浏览器，然后只有85％的IE
，隐藏一些解析器黑客？
（我对讨论em与像素大小的讨论感兴趣 - 这是一个不同的问题$
I have a large commercial site to rebuild, where the design has been
produced by the pixel-counting method. It''s also one of those sites
where cramming every space full of content is seen as better than a more
spread-out and usable design that uses some scrolling. Not surprisingly
it''s the work of paper-based magazine designers, not web designers.
This leaves me with several conflicting requirements:
- The body text size for the "article" pages should be 1em, for
well-known usability reasons.
- The "index" pages may require pixel-based font sizing control,
because otherwise I can''t constrain the text to fit in the available
space. These spaces are fixed pixel widths - they''re usually the size of
a bitmap image. Additionally they''re often "headline text" which means
few short words and some clunky behaviour for linewrapping.
- It must work cross-browser, including IE6 and IE/Mac
The real problem here is that IE blows the whole lot apart. With its
well-known problems of an excessive default scaling for ems to pixels, I
can produce a good implementation for the well-behaved browsers (even on
the Mac) but any IE rendering of the page only works when the user''s
text size is reduced to "Smaller". This is particularly bad if I attempt
to use <h*> markup, where the differences are particularly visible.
Any suggestions ?
Are there any "CSS hack" based techniques which will let me set a
default size of 1em/100% for web browsers, then an 85% value for IE
only, hidden by some parser hack ?
(I am _not_ interested in a discussion of em vs. pixel sizing - that''s a
different issue)
推荐答案
Andy Dingley写道：
Andy Dingley wrote:
我有一个大型商业网站进行重建，其中设计已经通过像素计数方法生成。它也是其中一个网站，其中填充每个充满内容的空间被认为比使用一些滚动的更广泛和可用的设计更好。毫不奇怪它是纸质杂志设计师的作品，而不是网页设计师。
这里真正的问题是IE将整个分开。由于其众所周知的问题是ems到像素的过度默认缩放，我可以为性能良好的浏览器（即使在Mac上）提供良好的实现，但任何IE渲染该页面仅在用户的文本大小减小到较小时起作用。如果我尝试使用< h *>这是特别糟糕的标记，差异特别明显。
有什么建议吗？
是否有任何CSS hack基于这些技术，我可以为web浏览器设置1em / 100％的默认大小，然后只为IE浏览器设置85％的值，由某些解析器黑客隐藏？
（我对讨论em与像素尺寸的讨论不感兴趣 - 这是一个不同的问题）
I have a large commercial site to rebuild, where the design has been
produced by the pixel-counting method. It''s also one of those sites
where cramming every space full of content is seen as better than a more
spread-out and usable design that uses some scrolling. Not surprisingly
it''s the work of paper-based magazine designers, not web designers. The real problem here is that IE blows the whole lot apart. With its
well-known problems of an excessive default scaling for ems to pixels, I
can produce a good implementation for the well-behaved browsers (even on
the Mac) but any IE rendering of the page only works when the user''s
text size is reduced to "Smaller". This is particularly bad if I attempt
to use <h*> markup, where the differences are particularly visible.
Any suggestions ?
Are there any "CSS hack" based techniques which will let me set a
default size of 1em/100% for web browsers, then an 85% value for IE
only, hidden by some parser hack ?
(I am _not_ interested in a discussion of em vs. pixel sizing - that''s a
different issue)
body {font-size：85％ ; voice-family：" \"} \"" ;; voice-family：inherit;
font-size：medium; }
body { font-size:85%; voice-family: "\"}\""; voice-family:inherit;
font-size:medium; }
On Sun，2005年9月18日12:33:59 -0400，CA Upsdell
<"" cupsdellXXX \" ; @ - @ - @ XXXupsdell.com">写道：
On Sun, 18 Sep 2005 12:33:59 -0400, C A Upsdell
<""cupsdellXXX\"@-@-@XXXupsdell.com"> wrote:
body {font-size：85％; voice-family：" \"} \"" ;; voice-family：inherit;
font-size：medium; }
body { font-size:85%; voice-family: "\"}\""; voice-family:inherit;
font-size:medium; }
但是，这不是（Tantek Celik hack）只是在IE5上工作吗？我需要让它在IE6上工作
（通过一些奇怪的逻辑，我实际上并不需要支持IE5 / PC作为我的
老板不会为此测试，但他会仔细测试
几乎未使用的IE5 / Mac组合）
But isn''t that (the Tantek Celik hack) just going to work on IE5 ? I
need to make it work on IE6
(By some bizarre logic, I don''t actually need to support IE5 / PC as my
boss won''t be testing for that, but he will be carefully testing the
almost unused IE5/Mac combination)
Andy Dingley写道：
Andy Dingley wrote:
On Sun，2005年9月18日12:33:59 -0400，CA Upsdell
<"" cupsdellXXX \" @ - @ - @XXupupsdell.com" ;>写道：
On Sun, 18 Sep 2005 12:33:59 -0400, C A Upsdell
<""cupsdellXXX\"@-@-@XXXupsdell.com"> wrote:
body {font-size：85％; voice-family：" \"} \"" ;; voice-family：inherit;
font-size：medium; }
body { font-size:85%; voice-family: "\"}\""; voice-family:inherit;
font-size:medium; }
但是，这不是（Tantek Celik hack）只是在IE5上工作吗？我需要让它在IE6上运行
But isn''t that (the Tantek Celik hack) just going to work on IE5 ? I
need to make it work on IE6
适用于IE6。不知道IE7。
Works for me with IE6. Don''t know about IE7.
这篇关于跨浏览器准确控制字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
