默认网页字体

发布于 2024-07-15 07:29:52 字数 143 浏览 4 评论 0原文

我正在添加一个 asp.net ImageButton,其中包含与 LinkBut​​ton 相邻的文本。 我正在使用图像编辑器为 ImageButton 创建图像,我需要知道 LinkBut​​ton 使用的字体。 我已经尝试过 firebug 但我仍然无法弄清楚。

i am adding an asp.net ImageButton that contains text adjacent to a LinkButton. i am creating the image for the ImageButton using an image editor and i need to know what font the LinkButton is using. i've tried firebug but i still can't figure it.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

请恋爱 2024-07-22 07:29:52

无论您使用什么字体和大小在图像上绘制文本,对于所有用户来说,它看起来都不会与浏览器中的文本相同。 根据操作系统的设置,有些浏览器在显示文本时会使用抗锯齿,这会对文本的外观产生很大的影响,并且常规抗锯齿和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;
}

Whatever font and size you use to draw text on the image, it will not look the same as the text in the browser for all users. Depending on the settings in the operating system some browsers will use anti-aliasing when displaying text, which will make a big diffence for the look of the text, and there is also some difference between regular anti-aliasing and cleartype. (In Windows 7 it will differ even more as it has a wizard for fine tuning cleartype for your specific screen, so there will be thousands of variations of how cleartype is rendered.)

Instead of putting the text in the image, use the image as background for a button and let the browser display the text on top of the image.

Example:

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

css:

.FancyButton {
   background: url(fancybutton.gif);
   border: none;
   width: 80px;
   height: 25px;
}
酒浓于脸红 2024-07-22 07:29:52

在 FireFox 中您可以看到默认字体和颜色:

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

Internet Explorer 中的

工具/互联网选项/常规
选项卡/字体按钮

In FireFox you can see the default fonts and colors :

tools/options/content tab/fonts and
colors

In Internet Explorer :

tools/internet options/general
tab/fonts button

一萌ing 2024-07-22 07:29:52

它并不能真正帮助找出所使用的字体,因为任何给定用户可能在其网络浏览器上设置了不同的默认字体,并且不同的网络浏览器也可能有不同的默认字体。

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

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

您能发布一张您想要实现的目标的图片吗?

我确实编写了一些 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>

It won't really help finding out the font used as any given user might have a different default font set up on their web browser and different web browsers will probably have different default fonts too.

If you want your ImageButton to use the same font as the LinkButton you'll need to specify the font yourself. The drawback to this is that unless you pick one of the common fonts there's no guarantee that all users will have this font installed. You can specify alternate fonts, but that doesn't really help here as you can't specify alternate images.

Why do you need to use an image that contains text?

Can you post an image of what you'd like to achieve?

I did write some CSS to make text have a button like background though it was for Classic Windows button style, but I'm sure that someone with more CSS knowledge than me could take it further. If you think it'll be helpful I'll go and dig it out and post it here.

EDIT: Here's the code:

.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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文