skip
 ▼  Site Navigation Main Articles News Search  ▼  Anime + Manga Anime Reviews Anime Characters Gallery Screenshots Manga Reviews  ▼  Misc Links to Webcomics Bible Quotes About Older Musings
site version 7.3
Fonts
written by: admin


Date Written: 12/8/06 Last Updated: 9/10/12

Websites can use several different fonts, but not all are supported on all browsers.  When a website uses a font that is not installed on a visitor's computer the browser will show one of the default fonts instead.  For example in the following code sample the visitor's computer will check to see if Lucida Calligraphy is available and will use that.  If it is not available on the user's browser then it will check the next font-family font: Helvetica and if that is not available then the next font-family listed will be checked and if none of them are available then a default font will be used.  

<div style='font-family: "Lucida Calligraphy", Helvetica, sans-serif'>This is Sample text.</div>


These font-families can also be over ridden by changing the settings in your browser.

When looking at fonts in the different browsers Firefox seems to recognize the fewest and Opera the most.  The fonts are virtually identical in design, but in Internet Explorer they look more refined as if a lot more work went into making the font look professional.  This is just a personal opinion at present, but take a look for yourself and you can see the difference.


Monospace Fonts
The default font used when none is specified seems to be a version of monospace.  The useful thing about monospaced fonts is that they use fixed width fonts, which can make formatting code a lot nicer and cleaner and more readable.  

The equal signs in the first example below are not aligned:


          $story          = this
          $comments       = this
          $genre          = this

It is actually difficult to get them perfectly aligned unless you use a monospace font as is shown in the second example below:
          $story          = this
          $comments       = this
          $genre          = this


CSS Syntax
font-family:Lucida Calligraphy;

To view the different fonts available in Opera go to Settings --> Preferences --> Web Pages --> click on the normal font or monospace font for lists of all the available fonts.

Trivia: the largest font size allowed by the Opera browser is 10239px.


Altering current font
You can alter certain aspects of the current font.  letter-spacing:1px; or letter-spacing:-1px; will either add 1 px or reduce by 1 px the distance between characters. ref
see also line-height
word-spacing

The following will allow you to move a word up or down relative to the line that it is on without affecting the surrounding text:
<body>
This <sub class="that_word">&#8594;</sub> word.
<br>here is some more text.
</body>
<style ="text/css">
.that_word {
color: orange;
font-family: Arial, Times, Serif;
position: relative;
top:-5px;
font-size:24px;
font-weight:bold;
}
body{background-color:blue;
color:white;}
</style>

This will give you something like:
This word.
here is some more text.

The reason the third line is displaced somewhat is due to the increased font-size of the arrow.


Using Custom Fonts
After the font files have been uploaded to your site you can access them with the following script.  It works in Firefox, Internet Explorer, and Opera.

<style type="text/css">
@font-face {
font-family: cool_font;
src: url("angelicwar-webfont.ttf");
src: url("angelicwar-webfont.eot");
src: local(cool_font), url("angelicwar-webfont.ttf");
}
p.custom_font{
font-family: cool_font;
font-size:52px;
}
</style>
<p class="custom_font">jgahskd</p>


From what I can tell quotes do not really matter for the name of the font unless there is a space involved. I used quotes for the location of the fonts. eot is used for internet explorer. The location of the font can be absolute or relative. The font format does not seem to need to be specified either.

Firefox may have some troubles with a select few fonts.  This seems to be the fault of Firefox for not recognizing certain older or corrupted fonts and the fonts themselves being older or corrupted somehow.  This is mostly an educated guess though.


Links


TAGS: css, fonts
copyright 2005–2024