CSS font properties Let's take a look at the numerous properties we can manipulate the text with when using CSS: Font family The font family property is a prioritized list of font names
Trang 1Joomla! Templates are usually packaged up in a zipped format and installed using
the built-in Joomla! upload / unzip feature They come in all shapes and sizes and
are designed in such a way that when they are installed and activated, they will
display your Joomla! content with their designated structure and design:
Using templates has a number of benefits, including:
A new template can be applied instantly to your website content This
flexibility means a completely different design may be given to your
website with little effort
Multiple styles can be applied to your website by using a number of
templates If you are looking to provide different design layouts to
different areas of your CMS, then this is an important feature
The template contains all CSS and website styling This is all self-contained
and can include overrides By going into your "Templates area", you can
easily make adjustments to your current template, and include custom
changes into this folder, protecting the "Core Joomla! Framework"
An important styling element of a Joomla! Template is the CSS These css files
contain important layout and style information, which contributes to your Joomla!
website design
Template CSS
Cascading Style Sheets are a web developer's best friend! They provide us with the
opportunity to be completely consistent with our site styling, and provide additional
layout and design options than plain HTML usage can offer
•
•
•
Trang 2Before CSS was used, nearly all of the styling in an HTML document was contained
in the HTML code Color, layout, styling, fonts, among others had to be specifically
listed in the code, often repeatedly throughout the HTML document:
<html>
<body>
<p><font size="2" face="Verdana">
This is a paragraph of text.
</font></p>
<p><font size="5" face="Times" color="red">
This is another paragraph.
</font></p>
</body>
</html>
Here text is styled using an older HTML method, where the styling is within the
HTML code
By using a CSS method, it allows us to put most of this styling information into a
separate document (.css file) This information can be referenced in the HTML
easily, resulting in a more efficient process and considerably simpler HTML code
The HTML code is as follows:
<html>
<body>
<p>This is a paragraph of text.<p>
</body>
</html>
The CSS code is as follows:
p {
font-family:Helvetica ,Arial,sans-serif;
font-size: 1em;
color: #000000;
text-align: left;
width: 100%;
}
The previous HTML and CSS code shows the styling of a p tag
CSS information can be embedded into the HTML document, but for a Joomla!
Template it is usually included in a separate document Quite often Joomla!
Templates contain multiple CSS files to separate the design elements When using
CSS, a separate stylesheet for a handheld device may be used to accommodate the
Trang 3smaller screen resolution, a custom stylesheet could be used just for the Internet
Explorer 6 browser, and so on Your Joomla! Template can contain coding to tell the
browser what stylesheet to load in, depending on what type of appliance the user is
viewing your website with
The Joomla! Template CSS file is usually located in the following directory
/templates/yourtemplate/css/template.css If you are using a pre-built Joomla!
Template, you may see multiple CSS files inside the CSS directory It is important to
note that the names of these CSS files may differ between Joomla! Templates, but the
template.css file is the standard naming convention for the main CSS file Certain
WYSIWYG editors rely on this naming convention to work correctly
We could devote a whole book to the complexities of CSS For this chapter, however,
we are just going to highlight the font property, and its available values
CSS font properties
Let's take a look at the numerous properties we can manipulate the text with when
using CSS:
Font family
The font family property is a prioritized list of font names for an element It is
possible (and good practice) to specify more than one font typeface in case the user
does not have the font you are specifying loaded on their computer system In CSS,
your browser will use the first font that it recognizes; hence we always list our font
families in a priority order:
body {
font-family: Arial,Courier,sans-serif;
line-height: 1.3em;
margin: 0px;
font-size: 12px;
color: #333;
Trang 4In the previous example, the font Arial will be used ahead of the
font Courier
There are two types of font-family values:
1 Family Name
The name of the font typeface For example: Helvetica, Courier, Arial
2 Generic Family
The name of one of the five generic font categories For example, serif,
sans-serif, and so on
In a Joomla! Template CSS file, the font family is usually applied to the body tag
This specifies a main font to be used for your website body text If you require
additional styling to other Joomla! text elements, then we define those accordingly
using further CSS
body {
font-family: Arial,Helvetica,sans-serif;
}
In the previous example, the browser will look for the font Arial, then Helvetica,
and if for some unknown reason the user didn't have those fonts installed on their
computer device, then the browser would substitute an available sans-serif font
to use
Where you use font families having more than one word in the name, it is important
to surround these font names with double quote marks While some browsers can
read these fonts without the quote marks, problems can occur if the white space in
between the words is considered or ignored
body {
font-family: Arial,"Times New Roman",sans-serif;
}
Note the TimesNewRoman in quotation marks
Font size
The font size property in CSS sets the size of your text Font sizing methods that you
can utilize in CSS can either be of absolute (fixed), or relative size
1 Absolute:
Sets the text to a specific size
Absolute sizing is useful if a fixed output or container is known
Using this method you can get the text to sit exactly as you wish
into that defined area
°
°
Trang 5Does not allow the user to adjust the text sizing in some
browsers For this reason it is considered poor for accessibility
2 Relative:
Allows the user to change their text size in all browsers
The font size is based off the default font setting in the browser
The user can change this default value if they wish
Sets a size of the text that is relative to the surrounding elements
The debate regarding which method to use is as on-going as which font typeface is
best for the screen Specifying in pt or px (absolute methods) has been classified as
non-W3C accessible, but allows you to style text in a confined container with more
design control If the layout of your text is important, then you may require this
styling method to align your text as you wish
If text can just spill out on the page and be resized by the user if required, then
relative is the preferred and accessible method of managing font size Relative
sizing can be done using em measurement or % (percent)
As a general rule:
1em = 16px = 12pt = 100%
Meet the units
In CSS there are four different units with which we can measure the size of the text
as it is displayed in the web browser
Setting the text size using em
To cater for all browsers and retain accessibility standards on your website, most
designers are trying to adopt the em relative text sizing method This is the
preferred text resizing method by the W3C standards
The way em sizing works is: 1em is equal to the current font size of the element in
question If you have not set a font size in other areas of your CSS, then it will take
the user's default browser font size The default text size in browsers is 16px, and
usually a font such as Arial font or Times This means the default size of 1em = 16px
If you were to set a font size for the body, say 18px, then 1em = 18px
°
°
°
°
Trang 6For general body text, you may see something similar to this Joomla! CSS file:
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}
Once the main body text font size has been specified, as in the previous example,
other text elements in your CSS can then be set relative to this using em's:
h2, contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}
Setting the text size using percent
Sizing using percentages works, as you would probably expect a percentage to work
Just like em's, using a percentage styling method is relative
If the parent item has a font size of 24px, and the child has a percentage of 50%, then
it will be displayed with font size of 12px
Just like em's , one popular technique for sizing using percentages is to set a parent
font size on the body of your CSS, and then use percentages for all other styling
Everything will be relative to that one parent size which is set:
.tool-text {
font-size: 95%;
margin: 0;
}
Trang 7Setting the text size using pixels
Pixels are fixed size units that are used in screen media One pixel is equal to one dot
on your screen and when using pixels to size your text you are telling the browsers
to render the text exactly that number of pixels high Using pixels to define our text
size provides us with excellent control over the size and layout of the text Using
pixels, however, does not allow the ability to scale upwards for visually impaired
users, nor scale downwards for mobile devices
Sizing your text using pixels will allow browsers such as Firefox and Safari to still
retain some text control, but when viewing with Internet Explorer 6 the user will not
be able to resize this absolute styled text All in all, setting font sizes with px is an
accurate method, but do take into consideration the IE 6 lack of accessibility
Setting the text size using points
The unit of points (pt) is usually associated with print media Points are much like
pixels in that they are of fixed size and cannot be scaled to size Just like pixels are
accurate for screen resolutions, points are accurate on paper
72pts = one inch
It is not good practice to use pt styling for your Joomla! Template CSS, but it would
be good to use points when creating a separate print.css stylesheet
An example of print CSS may look like:
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
Font style
The "font style" property sets the style of your specified fonts
The values are:
Normal
The browser will display a normal font style
Italic
The browser will display an italic font
Oblique
The browser will display an oblique font
•
•
•
Trang 8When written down in the CSS, the font-style property may look like this:
body {
font-style: italic;
}
Font weight
The font weight property sets the width of the font For example, how thick or thin
the text should be displayed
The values are:
Normal
Defines normal characters
Bold
Defines thick characters
Bolder
Defines thicker characters
Lighter
Defines lighter characters
You can also use the values: 100-900
This method defines thick to thin characters and offers a further level of control
As an indication, the value 400 is the same as normal, and the value 700 is the
same as bold
p
{
font-weight: bold;
}
Using CSS, it is possible to define each of the font properties within your document,
or you can define all of the values into one shorthand property This is called
simply font
The "font" property in CSS can include the "line-height" value This element allows
you to set the space between the text lines:
p
{
font: italic bold 900 12px/14px arial;
}
•
•
•
•
Trang 9Alternative methods to use custom fonts
in your web pages
So, we really like a specific font and wish to use this for our menu or heading, but
we know that the reader won't have this installed on their computer system What
can be done?
One of the most popular methods is to use images in place of the text By using an
image method, you can design your typeface in a graphics program (in the font of
your choice) and then put that into your website page This means that the user ends
up viewing the words in your selected font For Joomla! Templates, you will often
see this method used for menu and module icons, among others
Image replacement techniques can also be performed using a PHP / JavaScript
Library called FaceLift Image Replacement (FLIR), pronounced "fleer" This
technique automatically replaces any text on the web page with an automatically
generated picture if the font is not found on the user's machine FLIR is open source
and doesn't require other tools to be used on the server, nor any plugins to be loaded
on the user's browser FLIR requires PHP and the GD Image Library to be installed
on the server
The following is an example of FLIR in action on the home page at
http://facelift.mawhorter.net
Scalable Inman Flash Replacement (sIFR) is another method of replacing short
passages of plain text, with that rendered in the font of your choice The sIFR method
uses a combination of Flash, JavaScript, and CSS sIFR is a new technology growing
in popularity sIFR is also open source, and requires the Flash player plugin to be
installed in the reading browser
Initiatives for real-time downloading of specific fonts to the user's browser are being
developed and browser support being phased-in, and I'm sure in the near future will
be available There are even a number of sIFR extensions now available for Joomla!
These will be mentioned in the following sections
Trang 10Joomla! text and typography extensions
The majority of professional Joomla! Templates now available have "Typography"
and text / font features built directly into them Pre-configured class styling have
been included into the CSS sheets, allowing the end user a vast array of text styling
at their fingertips
From administration driven "What font do you want to use?" parameters, through
to included class styling, your template can take on a stunning new text look with
small changes:
The majority of modern professional Joomla! Templates now contain pre-styled
typography options which provide style and interest within your site pages: