Question

我正在添加一个包含与LinkButton相邻的文本的asp.net ImageButton。我正在使用图像编辑器为ImageButton创建图像，我需要知道LinkButton使用的是什么字体。我曾经尝试过萤火虫，但我仍然无法理解它。

Answer 1

无论使用何种字体和大小在图像上绘制文本，它都不会与浏览器中的文本看起来与所有用户相同。根据操作系统中的设置，某些浏览器在显示文本时会使用消除锯齿，这会对文本外观产生很大影响，并且常规抗锯齿和cleartype之间也存在一些差异。（在Windows 7中它会有更大的不同，因为它有一个用于特定屏幕的微调cleartype的向导，因此将有数千种关于如何呈现cleartype的变体。）

不要将文字放在图像中，而是使用图像作为按钮的背景，让浏览器在图像顶部显示文字。

示例：

<asp:Button runat="server" class="FancyButton" Text="click me" />

的CSS：

.FancyButton {
   background: url(fancybutton.gif);
   border: none;
   width: 80px;
   height: 25px;
}

Answer 2

在FireFox中，您可以看到默认的字体和颜色：

工具/选项/内容标签/字体和颜色

在Internet Explorer中：

工具/互联网选项/一般标签/字体按钮

Answer 3

找出所使用的字体并不会有帮助，因为任何给定的用户可能在其Web浏览器上设置了不同的默认字体，而且不同的Web浏览器也可能具有不同的默认字体。

如果您希望ImageButton使用与LinkButton相同的字体，则需要自己指定字体。这样做的缺点是，除非您选择一种常用字体，否则无法保证所有用户都将安装此字体。您可以指定备用字体，但这并不能帮助您，因为您无法指定备用图像。

为什么需要使用包含文本的图像？

你能发布你想要实现的图像吗？

我确实写了一些CSS，使文本有一个像背景一样的按钮，虽然它是针对经典Windows按钮样式的，但我确信有比我更多CSS知识的人可以更进一步。如果您认为它会有所帮助，我会去挖掘并在此发布。

编辑：这是代码：

.button {
    font:"Microsoft Sans Serif";
    font-size:small;
    background:#CCCCCC;
    border:solid;
    border-width:thin;
    border-left-color:#FFFFFF;
    border-top-color:#FFFFFF;
    border-right-color:#666666;
    border-bottom-color:#666666;
    padding-left:12px;
    padding-right:12px
}

<span class="button">Esc</span>

默认的网络字体

3 个答案: