default web font

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

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;
}