Note: This article only for those who have strong web design background. If
you think the font size is not very important for your webpage, just skip this
article.
You may meet the following problem: After your designed your page in your computer,
everything seems fine. But when others use their own browers to view your file,
the font size changed! Some text goes out of control and break your table background
and move the image out of the original position. Let's see the following samples:
Banner:
Menu:
|
Home | About Us | Our Products
| Our Services | Tech Support
| Contact Us
|
Recipe:
Please change the font size to see what will happen. In IE, you can open the
context menu "View", then "Text size" to change the text size to "Largest".
In Netscape, the same function in the context menu: "View" > "Increase Font/Decrease
Font".
As you can see. the result is too bad. If you don't think this matters then
this article is not for you.
This problem is caused by the text size. How to fix this problem? There are different
solutions. A common way is using images to stop the font size to be changed. As
you may know, when you change the font size by the browser, the image size will
not be changed. That's one of the reasons why most web designers use this method
to make navigator menus, banners and other design that needs to type text on
the pictures.
If you just want to stop the font size being changed and you use an image, it might
not be the best solution.
Let me show you another solution.
We can use CSS to solve this problem. The following is the source code:
<html>
<head>
<title>How to set a fixed text size</title>
<style type="text/css">
<!--
.fixed {font-size:12px}
-->
</style>
</head>
<body>
<span class="fixed">This is a test.</span>
</body>
</html>
Open your browser, IE and Netscape, and try it now! Changing Text Font (IE)
or Increase Font/Decrease Font (Netscape), you may see, the text size is fixed!
The point is set font size unit as "px", not "pt". The
.fixed is a class selector. You can use any name for a class.
Any opening tag of HTML can be used as a selector. For example, <p>,
<font>, <a>, <bockquote>, <pre>, <h1>, <i>,
<table> and <td> etc. You also can take <body> tag as a selector.
A sample as below:
<html>
<head>
<title>How to set a fixed text size</title>
<style type="text/css">
<!--
p {font-size:12px}
pre{font-size:10px}
h1{font-size:24px}
h2{font-size:18px}
-->
</style>
</head>
<body>
<h1>This is an example of CSS</h1>
<p>CSS is really useful.</p>
<pre> I set a fixed font for my page!</pre>
</body>
</html>
To learn more about CSS, you may go to:
CSS For Beginners
One might say I don't like this solution because after setting a fixed font
size, others can't change it. Perhaps I should mention that when you go to
a book store to buy a book you also can't change the font size on the book.
You may prefer other solutions for example using an image, but one thing is clear:
The result is the same by using "image-text"
and by using "CSS-fixed-text". You can't change an "image-text"
by your browser. Besides, if one day you or your boss or your clients want to
change the text, you will have to make the image again. It will take more time
to do it than changing a CSS-fixed text.
Now this is not a law, just one of solutions. You still have your rights to
use other solutions or use no solution. Or you may just use it on your banners,
menus and headings, and keep other contents as usual.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
