GWT默认样式IE字体大小

Question

我正在使用标准 GWT (2.0.1) 来制作一个互联网应用程序，并且我遇到了这个奇怪的问题，即 IE 7 和 IE 7 中的默认样式的巨大字体（编辑：好吧，比正常大）。 8，而 FF、Chrome 和 Safari 可以正确显示字体。起初我认为我这边一定有错误（我使用 UiBinder 和一些自定义 css），但后来我注意到 GWT 展示网站上的各种小部件字体也太大了。有什么想法吗？

Answer 1

这是由于 IE 默认字体大小渲染造成的，与 GWT 无关，而是与 CSS 样式有关。

您可以使用这样的 CSS 确保字体在多个浏览器上保持一致（例如）：

*
{
    font-family: Arial, sans-serif;
    font-size: 12pt;    
}

body, table td, a, div, .p, pre 
{
    font-family: Arial, sans-serif;
    font-size: 12pt;
}

编辑：

为了确保所有小部件“获得”这种新样式，您需要将 CSS 文件放入 *.css 文件中。按以下方式修改 gwt.xml 文件（行的顺序很重要）：

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="MyNewAndImprovedStyle.css" />

不要将其放在 HTML 页面中！

这将确保您的样式覆盖小部件样式。

PS：您可以手动覆盖一些小部件样式（我有一个用于此目的的 GwtOverride.css）...请参阅代码片段：

.gwt-TextBox,.gwt-PasswordTextBox,.gwt-DateBox
{
    border: 1px solid #BDBDBD;
    padding: 2px;
    background-color: #FFFCDA;
}


.gwt-ListBox 
{
    font-family: Arial, sans-serif;
    font-size: 12px;    
    background-color: #FFFCDA;
}


/* make dialog slick and nice */
.gwt-DialogBox .dialogContent 
{
    margin: 5px;
}

.gwt-DialogBox .Caption 
{
    background: #99B4CC;
    border-top: 2px solid #99B4CC;
    border-bottom: 1px solid gray;

    font-size: 110%;
    font-weight: bold;
    white-space: nowrap;
}

Answer 2

Opera 10.10、IE 6 和 FF 3.6（均在 WinXP SP3 上）之间的快速比较 - Opera 和 IE 显示稍大的字体。我不确定这是否是 GWT 的错 - 每个浏览器都有一些定义默认外观的核心 CSS 规则，如果没有应用其他 CSS 样式（例如 FF 中所有图像上令人讨厌的蓝色边框），所以只要确保您明确设置了您的字体大小等来消除这些差异。

也就是说，除非您看到的字体比应有的大得多，否则这可能是一个错误。

更新：在 Linux (Gentoo amd64) 下是一样的 - Opera 渲染的字体比 Firefox 稍大，但看起来没什么奇怪的。