Главная » Языки программирования

Setting Font Size

Содержание
  1. Font type and font size for text in HTML
  2. Basic specification of font size
  3. Relative font sizes
  4. HTML — Fonts
  5. Set Font Size
  6. Example
  7. Relative Font Size
  8. Example
  9. Setting Font Face
  10. Example
  11. Specify alternate font faces
  12. Setting Font Color
  13. Example
  14. The Element
  15. Example
  16. Example of the <basefont> Element
  17. HTML Tag
  18. Syntax
  19. Example of using HTML tag:
  20. Result
  21. CSS Styles
  22. Example of changing the style of the text with CSS:
  23. Attributes
  24. How to style tag?
  25. Common properties to alter the visual weight/emphasis/size of text in tag:
  26. Coloring text in tag:
  27. Text layout styles for tag:
  28. Other properties worth looking at for tag:
  29. CSS Fonts
  30. Font Selection is Important
  31. Generic Font Families
  32. Difference Between Serif and Sans-serif Fonts
  33. Some Font Examples
  34. The CSS font-family Property
  35. Example

Font type and font size for text in HTML

Today there really is only one way of specifying the font type, and that is STYLE=»font-family:name», where the name of the font is written in single quotes, i.e. ‘Times New Roman’ and ‘Arial’. In older litterature you can encounter the tag , and it will probably work for som browsers, as long as you program according to HTML 4, but it isn’t a viable solution for a modern web site.

Most browsers use Times New Roman as default for text, and it is a good font for many things. This web site uses Times New Roman for headlines bur Arial for the main text, as it is better for reading on computer screens. The style font-family can be applied on all tags for text, i.e. besides the common text section like and , it can also be used for tage like table rows and table cells, and . For a where we want to change from our standard Arial to Times New Roman, the code looks like this:

Читайте также:  Java check if file is in folder

P� siden, n�r den vises, ser det s�ledes ud:

For a web site, it is always a good idea to have specified a standard font type for the pages to use, unless something else has been specified. The quickest and easiest way of doing this, is by specifying the font type in the BODY tag. If you want to be a bit practical about it, you specify it in your CSS file.

Basic specification of font size

Today there really is only one way of specifying the font size, and that is STYLE=»font-size:size». In older litterature you can encounter the attribute SIZE, and it will probably work for som browsers, as long as you program according to HTML 4, but it isn’t a viable solution for a modern web site.

Which font size to use depends entirely on the font type and layout. The general recommendation is to make it so big, that it is easy to read. From here you have to try to see what works.

Font sizes can be specified in three ways: size in points (pt), size in pixels (px) and centimeters (cm) or millimeters (mm). You can also specify it in other ways, e.g. percents, but this requires a specified start size, e.g. for the BODY tag. Relative font sizes are explained in the next section. Choosing pt or px is a matter of personal taste, you just have to be consistent and use only one type of specification, so you don’t get in trouble with the relative sizes.

As code, the scaling looks like this:

On the page, when shown, it looks like this:

NOTE: Pixels (px) needs to be integers, as you can’t have e.g. half a pixel or a quarter of a pixel on a screen. Points (pt), centimeters (cm) and millimeters (mm) can be decimal numbers, no problem.

Relative font sizes

Relative size has to be used with some care. For HTML there is a number of options, that aren’t all that well-defined:

ValueDescription
mediumSetting the font size to medium. This is default
xx-smallSetting the font size to medium xx-small
x-smallSetting the font size to medium extra small
smallSetting the font size to medium small
largeSetting the font size to medium large
xx-largeSetting the font size to medium xx-large
smallerSetting the font size to something smaller than the parent element
largerSetting the font size to something bigger than the parent element
%Setting the font size to a percentage of the parent element’s font size
initialSetting the font size to the initial value for the type of element
inheritInherit the value from the parent element.

Because there is a difference between browsers and how they interpret the various sizes, you can’t be sure that e.g. small always reduce the size to the same small size, which can cause som problems with the layout. The solution is using %, e.g. in a CLASS in CSS, and stay far away from sizes that aren’t well-defined.

The relative sizes are used exactly like the absolute font sizes, e.g. using percents:

On the page, when shown, it looks like this:

© Michael Pilgaard .
Contact information: If you have comments, questions or corrections, please send them to Michael Pilgaard
Legislation: Copyright, ownership information and cookies- and privacy policy

Источник

HTML — Fonts

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it’s suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

     Font size = "1" 
Font size = "2" 
Font size = "3" 
Font size = "4" 
Font size = "5" 
Font size = "6" 
Font size = "7"

This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like or

Example

     Font size = "-1" 
Font size = "+1" 
Font size = "+2" 
Font size = "+3" 
Font size = "+4"

This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user’s computer.

Example

     Times New Roman 
Verdana 
Comic Sans MS 
WildWest 
Bedrock

This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

Note − You can check a complete list of HTML Color Name with Codes.

Example

     This text is in pink 
This text is red

This will produce the following result −

The Element

The element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a tag. You can use the elements to override the settings.

The tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example

      
This is the page's default font.
 
Example of the <basefont> Element
 
 This is darkgray text with two sizes larger 
 
 It is a courier font, a size smaller and black in color.

This will produce the following result −

Источник

HTML Tag

The tag defines the font characteristics. Size, color and typeface are defined by the size , color and face attributes.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

Example of using HTML tag:

html> html> head> title>Title of the document title> head> body> p> font size="2" color="#1c87c9">Blue text font> p> p> font size="3" color="red">Red text, font size increased. font> p> p> font face="arial" color="#8ebf42">Green text, typeface changed. font> p> body> html>

Result

font tag example

CSS Styles

To change the text color, use the CSS color property instead of the color attribute. CSS font-family or font-face properties replace the face attribute, and instead of the size attribute, the CSS font-size property is used.

Example of changing the style of the text with CSS:

html> html> head> title>Title of the document title> head> body> p style="font-size:16px; color:#1c87c9;">Blue text. p> p style="font-size:18px; color:red;">Red text, font size increased. p> p style="font-size:18px; color:#8ebf42; font-family:arial;">Green text, typeface changed. p> body> html>

Attributes

Attribute Value Description
color rgb (x, x, x)
#xxxxxx
colorname		 Sets the color of the text.
face font_family Sets the typeface.
size number Sets the size of the text.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

  • CSS text-shadow property adds shadow to text.
  • CSS text-align-last property sets the alignment of the last line of the text.
  • CSS line-height property specifies the height of a line.
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
  • CSS word-spacing property sets the spacing between words.

Источник

CSS Fonts

Choosing the right font for your website is important!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

  1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
  2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
  3. Monospace fonts — here all the letters have the same fixed width. They create a mechanical look.
  4. Cursive fonts imitate human handwriting.
  5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Tip: The font-family property should hold several font names as a «fallback» system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.

Example

Specify some different fonts for three paragraphs:

.p1 <
font-family: «Times New Roman», Times, serif;
>

.p2 font-family: Arial, Helvetica, sans-serif;
>

.p3 font-family: «Lucida Console», «Courier New», monospace;
>

Источник

Оцените статью
© 2024 Программирование