Introduction To Website Design And Development HTML5, CSS3, And JavaScript 4th Edition By Jennifer Robbins – Test Bank
To Purchase
this Complete Test Bank with Answers Click the link Below
If face any problem or
Further information contact us At tbzuiqe@gmail.com
Sample
Questions
chapter 5 (page 49) we introduced the basic skills of cropping
and resizing
images. In this chapter we build on that knowledge by showing how to make
part of an image transparent.
81
CHAPTER 8. IMAGE TRANSPARENCY
8.1
82
Irregular Shapes and Transparency
You probably know that the human eye contains a retina, and the
retina is
composed of cones and rods. The rods detect black and white. The cones
detect only three colors: red, green, and blue.
Computer images commonly use the RGB model that is made up of layers
or channels: red, green, and blue. Color printers commonly use the CMYK
model that uses four colors of ink: cyan, magenta, yellow, and black.
The red, green, and blue channels each tell how much of that color of light
should be shown at each point of the image.
For transparency, we simply invent a new channel to tell how transparent
or opaque the image should be at each point.
To do irregular shapes, the easiest method is to use the alpha channel to
create transparency in parts of the image. Not all file formats support
transparency. PNG is probably the best one to use.
Exam Question 138 (p.344): Does the .gif image file format support
transparency?
Required Answer: yes
Exam Question 139 (p.344): Does the .jpg image file format support
transparency?
Required Answer: no
Exam Question 140 (p.344): Does the .png image file format support
transparency?
Required Answer: yes
In this section we show you how to make an irregularly-shaped image. Really,
though, the image will be rectangular just like always, but parts of it
will be transparent.
CHAPTER 8. IMAGE TRANSPARENCY
We will use a picture of myself. I have already
cropped the picture to be very close to the material I want to keep. The
original picture is much
bigger. We will continue by deleting everything
that is not me. We will make the deleted parts
transparent. We will save the resulting image as
a png file.
Here is the original picture we will use. It is
194×314 pixels, which will be a good size for our
finished web graphic.
Using Gimp Menu: Layer /
Transparency / Add Alpha
Channel, we create the ability
to have transparency in this image. (Red, green, and blue are also
channels.)
We select the fountain-pen tool by double-clicking it.
This will let me click my way around the important part
of the picture, doing a selection that is irregular rather
than rectangular or circular. This tool is actually much
more powerful that what I am showing you. It creates a
Bézier curve.
83
CHAPTER 8. IMAGE TRANSPARENCY
I started down at my neck, clicking with the
fountain-pen tool along the edge of my head. You
can see I have progressed up the left edge and am
most of the way across the top of the image. The
series of white circles indicate the locations where
I clicked. It is useful to get as close as you can
to the line between what you want and what you
do not want. It can be helpful to view the image
at a higher magnification to aid in following the
boundary.
I have made it all the way around my picture. On
the last click, instead of simply clicking, I hold
down the control key while I click. This causes
the loop to be closed, joining the last click with
the first click. At this time, I can adjust any of
the dots if I did not place them well. Just click on
the dot and drag it. When the dots are all good
enough, I press ENTER to select the region I have
encircled.
84
CHAPTER 8. IMAGE TRANSPARENCY
85
If I delete now, I will delete my face because that
is what is selected.
Notice the grey checkerboard pattern where my
face was. This pattern is the commonly-used indication that the space is
transparent.
Fortunately, there is Gimp Menu: Edit /
Undo. I use it to get me back to where I was.
I use the Select / Invert command to invert my
selection, thus selecting everything but my face.
Now I am ready to delete again.
After deleting, just my face remains. The rest of
the image has been replaced by transparency. I
am ready to save. I will use Gimp Menu: File /
Export to save the image as a png file. If I saved
it as a jpg, the transparency would be replaced by
white. After saving I can upload my png file to
the web and use it as a graphic on a webpage.
Appendix 27 (page 248) gives a demonstration of how to create an
image
like a logo from scratch, without using a photograph.
CHAPTER 8. IMAGE TRANSPARENCY
8.2
86
Favicon
It is very popular to have a small image that represents your
entire website,
or specific pages of that website. The small image is called an icon.
In the old days, what we currently call bookmarks were called favorites. The
icon used to represent the webpage or website was called the favorites icon,
favicon.
Exam Question 141 (p.344): What does favicon stand for?
Required Answer: favorite icon
In olden days, icons were created to create a brand identity for groups of
webpages. There were special editors for creating them.
These days almost any image can be used for an icon. I have had success
with .png files. I like that they allow transparency.
8.2.1
By Filename
The original method for displaying such icons was to create a
specially formatted file called favicon.ico and put it in your document root
folder.
This method will always work. Nobody would dare break all the websites
that rely on it.
Your mileage may vary. Different browsers may act differently, but more
and more they try to provide the same basic functions so web pages look
and act the same across all major browsers.
Besides putting favicon.ico in the document root, it can sometimes also
be placed in any directory of the website. Some browsers will use the favicon
that is “closest” to the webpage that is being viewed. This is not totally
reliable though.
Many browsers are flexible about the exact format of the favicon file, and
will allow it to be a gif or jpg or png or something else. Just rename it to
favicon.ico and things will normally work.
(The browser can internally examine the favicon.ico file to decide what format
it is.)
CHAPTER 8. IMAGE TRANSPARENCY
8.2.2
87
By Link
Another method is available. This lets you have a different icon
for each
page of your website. You can specify a link tag in the head section of your
html page.
<link rel=icon href=favicon.ico>
This lets you easily rename the favicon to something else, as in this example.
<link rel=icon href=myicon.png>
Although an icon is presumed to be an image, it could actually be a sound
that is played. You should probably avoid that.
8.2.3
Many Sizes
Favicons can come in many sizes so the device can use the one
that fits the
best. The favicon.ico format actually supports a collection of images. And
the link rel=icon method supports a sizes= parameter to tell which sizes are
present in the file.
I would not bother having many sizes. Just go for a reasonably sized image,
maybe 160×160, and let the browser resize it as needed.
There are a huge number of devices that use favicons, all the way from
iPhones to big-screen TVs. You may want to create a dozen images or more
of different sizes so the browser can use the one closest to its desired size.
If
you want exact control over how your favicon looks on a variety of platforms,
you probably need to create all the common sizes: 16, 32, 48, 57, 72, 76,
114, 120, 144, 150, 152, 310.
Do a Google search on favicon to learn more about it.
8.3
Review of Tags and Attributes
In chapter 4 (page 36) we discussed HTML tags and attributes.
Here we
have some review questions for the chapter test.
Some HTML tags require closing tags. Others forbid them. And with some
they are optional. These questions review your knowledge about closing
tags.
CHAPTER 8. IMAGE TRANSPARENCY
88
div and span have not been fully introduced yet, but they appear
among
these questions anyway.
Exam Question 142 (p.344): For each <head> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: optional
Exam Question 143 (p.344): For each <body> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: optional
Exam Question 144 (p.344): For each <h1> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 145 (p.344): For each <h2> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 146 (p.344): For each <p> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: optional
Exam Question 147 (p.344): For each <b> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 148 (p.345): For each <i> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 149 (p.345): For each <em> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 150 (p.345): For each <s> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 151 (p.345): For each <u> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 152 (p.345): For each <sub> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
CHAPTER 8. IMAGE TRANSPARENCY
89
Required Answer: required
Exam Question 153 (p.345): For each <sup> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 154 (p.345): For each <br> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: forbidden
Exam Question 155 (p.345): For each <img> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: forbidden
Exam Question 156 (p.345): For each <img> tag in valid HTML5, is the
“width=” attribute required, optional, or forbidden?
Required Answer: optional
Exam Question 157 (p.345): For each <img> tag in valid HTML5, is the
“alt=” attribute required, optional, or forbidden?
Required Answer: required
Exam Question 158 (p.345): For each <a> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 159 (p.345): For each <div> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Exam Question 160 (p.345): For each <span> tag in valid HTML5, is a
separate closing tag required, optional, or forbidden?
Required Answer: required
Chapter 9
CSS: The Style Sheet
Contents
9.1
Why Bother With Style Sheets? . . . . . . . . .
91
9.2
Style Sheet vs Inline Styling . . . . . . . . . . . .
92
9.3
background-color: . . . . . . . . . . . . . . . . . .
92
9.4
color: . . . . . . . . . . . . . . . . . . . . . . . . . .
92
9.5
font-size: . . . . . . . . . . . . . . . . . . . . . . . .
93
9.6
font-weight: (normal, bold) . . . . . . . . . . . .
93
9.7
font-style: (normal, italic) . . . . . . . . . . . . .
94
9.8
text-align: (left, right, center, justify) . . . . . .
94
9.9
text-shadow: x y blur color . . . . . . . . . . . .
95
9.10 CSS Comments . . . . . . . . . . . . . . . . . . . .
96
9.11 Review of Previous Chapters . . . . . . . . . . .
96
In Chapter 1 (page 8) we used a small amount of styling. We
styled a
background color to be yellow, and we styled an image to have a border.
As we further learned in section 4.4.1 (page 46), there is a globally available
attribute, style=, that can be applied to any HTML tag. It allows you to
apply styling directly to that element. It is called in-line styling.
Often we want to apply similar styling to many elements of the same kind.
Styling each one individually is tedious, and making changes later is truly
awful. We want a general solution.
Our more general solution is the style sheet.
90
CHAPTER 9. CSS: THE STYLE SHEET
91
The <style> and </style> tags identify a style
sheet. (You can have more
than one.) Put your main style sheet someplace between your <head> and
</head> tags.
Web browsers will also accept style sheet material other places in your
document, but the best place to put it is in the head.
The material inside the style section is called an internal style sheet. It is
possible to have an external style sheet that is shared among many webpages,
but this internal style sheet is used by just this webpage.
The language used in your webpage is HTML, but within the style sheet, the
language is called CSS, or Cascading Style Sheet language. It has somewhat
different linguistic rules than HTML does.
Exam Question 161 (p.346): What does CSS stand for?
Acceptable Answer: cascading style sheet
Within a style sheet, all CSS looks the same as this prototype:
target { attribute: values; attribute: values; … }
The attribute list for a target is enclosed in curly braces. Individual
attributes are separated from their values a colon, and terminated (separated
from the next attribute) by a semi-colon.
Exam Question 162 (p.346): Give the prototype for CSS directives.
Acceptable Answer: target { attribute: value; … }
In this chapter we will look at targets that are actual HTML tags. Later,
in section 10.1 (page 99), we will look at IDs and classes as targets.
We are familiar with the <body> tag. We can use it in CSS to apply
styling
to the whole body of the webpage.
body { background-color: yellow; }
If we include that line in our style sheet, the background of the whole webpage
will turn yellow.
We can use a similar approach to control the styling of <h1>, <h2>,
<p>,
<a href=…> and all other tags.
9.1
Why Bother With Style Sheets?
People that create content generally do the markup on that
content.
CHAPTER 9. CSS: THE STYLE SHEET
92
People that design styles generally do NOT create the content.
It requires
a different skill set that is probably more artistic.
It is widely accepted that the styling (CSS) and the content (HTML) should
be kept separate so that changes to styling do not require any changes to
the content.
The same holds true for JavaScript. It can be hidden inside the content, or
it can be kept separate. It is better to keep it separate.
9.2
Style Sheet vs Inline Styling
To give all paragraphs a yellow background, we could insert the
following
line into a style sheet.
p { background-color: yellow; }
Inline Styling: To give one specific paragraph a yellow background, we
could use the following in place of the <p> tag.
<p style=”background-color: yellow;”>
or: <p style=background-color:yellow>
9.3
background-color:
As we have just seen, the background-color: attribute can be
used to
control the background color of a webpage. We talked about color in Chapter
7 (page 71). Feel free to experiment.
Exam Question 163 (p.346): What CSS attribute: sets the color behind
your lettering?
Required Answer: background-color:
9.4
color:
The color: attribute can be used to control the foreground color
of the text
on a webpage.
Exam Question 164 (p.346): What CSS attribute: sets the color of your
lettering?
CHAPTER 9. CSS: THE STYLE SHEET
93
Required Answer: color:
To style all <h1> headers with green lettering on a pink background, we
could use this style directive.
h1 { color: green; background-color: pink; }
9.5
font-size:
We can control the size of our lettering by using the font-size:
attribute.
Exam Question 165 (p.346): What CSS attribute: sets the size of your
lettering?
Required Answer: font-size:
Note that text-size: is not a CSS attribute. Use font-size: instead.
To make all level-two headings twice as big as ordinary text, we could use
the following directive.
h2 { font-size: 200%; }
font-size: can be measured in many different ways, including points. To
make all bold text appear in 24-point size, we could use the following
directive.
b { font-size: 24pt; }
As you will remember, there are 47 points in one central degree of vision,
and 96 points equals one inch held at arm’s length. Commonly font sizes
of 9pt or 10pt are used in books, with about 72pt per inch on the printed
page.
Old-style HTML might show things like <font size=3>. The old style is
deprecated. Do not use it.
9.6
font-weight: (normal, bold)
font-weight: can be normal, bold, or an x-hundred number like
100, 200,
…, 900. The smaller the number, the lighter the weight.
Exam Question 166 (p.346): What CSS attribute: sets the thickness of
your lettering?
Required Answer: font-weight:
CHAPTER 9. CSS: THE STYLE SHEET
94
If you want to, you can redefine <b> to have no boldness
by using this
directive.
b { font-weight: normal; }
9.7
font-style: (normal, italic)
font-style: can be normal, italic, or oblique (which means the
same as
italic).
Exam Question 167 (p.346): What CSS attribute: sets the slant of your
lettering?
Required Answer: font-style:
You could even redefine <i> to have no slant by using this directive.
i { font-style: normal; }
9.8
text-align: (left, right, center, justify)
Text can be centered, or it can be justified to the left, to the
right, or to
both sides of the column. The text-align: attribute can have a value of
left, right, center, or justify.
Old-style HTML might show things like <center>. The old style is
deprecated. Do not use it.
text-align:
text-align:
text-align:
text-align:
center; /* ragged left and right */
left; /* straight left, ragged right */
right; /* ragged left, straight right */
justify; /* straight left and right */
Exam Question 168 (p.346): List the four “text-align:” options.
Required Answer: left, right, center, justify
To center the text of all paragraphs, we can do this.
p { text-align: center; }
CHAPTER 9. CSS: THE STYLE SHEET
9.9
95
text-shadow: x y blur color
This is kind of a fun one. The text-shadow: property can be used
to
display a shadow behind your lettering. This is almost like creating new
fonts. This can look very cool. Or it can look awful. Use your artistic
judgment.
Exam Question 169 (p.346): What CSS attribute: creates a shadow
behind your lettering?
Required Answer: text-shadow:
It has four parameters.
text-shadow: (x) (y) (blur) (color);
Here is an example.
h1 { text-shadow: 1px 2px 3px red; }
The first parameter, in this case 1px, is the (horizontal) x-offset for the
shadow. Positive numbers move the shadow to the right. Negative numbers
move the shadow to the left.
The second parameter, in this case 2px, is the (vertical) y-offset for the
shadow. Positive numbers move the shadow down. Negative numbers move
the shadow up.
The third parameter, in this case 3px, is the amount of blur. Small numbers
result in a crisp shadow. Large numbers result in a blurry shadow.
The fourth parameter, in this case red, is the color of the shadow. You can
use any method of specifying the color, including methods like rgba that
allow transparency.
Neon Lights: You can create a neon lights effect by setting the x and y
offsets to zero. Use a sans-serif font, maybe with rounded ends.
Multi Shadow: You can have more than one shadow. Separate the specifications
with commas.
text-shadow: 1px 2px 3px red, 2px 4px 3px blue;
The second shadow will appear behind the first. The third shadow will
appear behind the second. Etc.
Textless Shadow:
You can also change the color of the text itself, perhaps to match the back-
CHAPTER 9. CSS: THE STYLE SHEET
96
ground. Then the only thing visible is the shadow.
You can also do this with the opacity attribute.
Google search “css text effects” for more ideas.
9.10
CSS Comments
CSS is a whole different language than HTML, and it has its own
way of
identifying comments. Comments in the style sheet are surrounded by /*
at the front, and */ at the end.
Exam Question 170 (p.346): What marks the start of a comment in CSS?
Required Answer: /*
Exam Question 171 (p.346): What marks the end of a comment in CSS?
Required Answer: */
Exam Question 172 (p.346): In CSS can comments be nested?
Required Answer: no
9.11
Review of Previous Chapters
The <b> tag starts a section of bold text, and the
</b> tag identifies the
end of that section.
<b>Here is some bold text.</b>
Bold text uses a font that is thicker and heavier and darker than normal.
It is said to have more weight than normal text.
Strong text is (by default) just bold text. Bold is presentational markup.
Strong is semantic markup.
Exam Question 173 (p.346): In HTML the <strong> tag usually does
the same as what other tag?
Required Answer: <b>
<i>Here is some italic text.</i>
Italic text uses a font that is slanted to make it look special.
<em>This is emphasized text.</em>
Emphasized text is similar to italicized text, but em tries to indicate your
CHAPTER 9. CSS: THE STYLE SHEET
97
purpose, and i indicates how you want it done. For practical
purposes they
are pretty much the same.
Exam Question 174 (p.346): In HTML the <em> tag usually does the
same as what other tag?
Required Answer: <i>
Chapter 10
Font Families
Contents
10.1 Style Sheet vs Inline Styling . . . . . . . . . .
10.1.1 class= . . . . . . . . . . . . . . . . . . . . . .
10.1.2 Class Names . . . . . . . . . . . . . . . . . .
10.2 What Is A Font? . . . . . . . . . . . . . . . . .
10.2.1 Word Processing Font Choices . . . . . . . .
10.2.2 Web Page Font Choices . . . . . . . . . . . .
10.2.3 Raster vs Vector . . . . . . . . . . . . . . . .
10.2.4 Copyright and Knock-Offs . . . . . . . . . . .
10.2.5 Good News, Bad News . . . . . . . . . . . . .
10.3 Five Generic Font Families . . . . . . . . . . .
10.3.1 Serif . . . . . . . . . . . . . . . . . . . . . . .
10.3.2 Sans-serif . . . . . . . . . . . . . . . . . . . .
10.3.3 Monospace . . . . . . . . . . . . . . . . . . .
10.3.4 Cursive . . . . . . . . . . . . . . . . . . . . .
10.3.5 Fantasy . . . . . . . . . . . . . . . . . . . . .
10.4 The Font Stack . . . . . . . . . . . . . . . . . .
10.5 Defending Against Missing Fonts . . . . . . .
10.6 Web Fonts . . . . . . . . . . . . . . . . . . . . .
10.6.1 Google Web Fonts (Free) . . . . . . . . . . .
10.6.2 Web Fonts: fonts.com (Paid) . . . . . . . . .
10.7 Special Glyphs . . . . . . . . . . . . . . . . . .
10.8 Font and Text Attributes . . . . . . . . . . . .
98
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
99
. 99
. 100
100
. 101
. 101
. 102
. 102
. 103
103
. 104
. 104
. 105
. 105
. 106
106
109
110
. 110
. 111
111
113
CHAPTER 10. FONT FAMILIES
99
Most of this chapter is about fonts, but we will start out with
a brief discussion of classes because it provides a short-cut to help us use
fonts more
easily.
10.1
Style Sheet vs Inline Styling
We can put lots of styling information right inside our markup,
but the
smart money says we should keep them apart. The best-practices approach
is to put virtually all of our CSS into a style sheet. From here on out, we
will follow that approach in this book.
In chapter 9 (page 90) we learned about targets and attributes, and that
this is the prototype for style sheet entries.
target { attribute: values; attribute: values; … }
In this section we will learn about class= which give us another way to apply
special styling to selected paragraphs.
10.1.1
class=
Within any HTML tag, we can say that it belongs to one or more
classes.
For example:
<img class=floatLeft src=… alt=…>
If you want to apply more than one class, separate them by spaces and put
the list in quotes:
<img class=”floatLeft framed” src=… alt=…>
Within the style sheet, you specify the attributes that belong to that class.
Those attributes will be applied to the marked-up content as though they
had been specified inline.
.floatLeft { float: left; margin-right: 5px; }
.floatRight { float: right; margin-left: 5px; }
.framed { border: thick black double; }
The immediate advantage of this approach is that you can provide the attributes
one time and then use them many times, without retyping them.
CHAPTER 10. FONT FAMILIES
100
The latent advantage of this approach is that you can change the
attributes
of any class very easily and have it apply to all the content that belongs to
that class. You do not need to look for each item in your HTML and fix it
separately.
Exam Question 175 (p.346): In CSS what is the one-character symbol
for class?
Required Answer: .
The one-character symbol for class is . (dot).
10.1.2
Class Names
If you get to choose your class names, I recommend you follow
the simple
rule: start with a letter and continue with letters or digits or dashes.
Underscore counts as a letter. Case matters. (Big A and little a are recognized
as being different from each other.)
Exam Question 176 (p.346): What is the simple rule for creating a legal
class name?
Acceptable Answer: letter first, then letters or digits or dashes
This is the same rule that many computer languages use for creating variable
names (except for dashes).
The complex rule for class names is that you can use almost any character,
but you have to properly escape some of them, which can make life difficult.
Having established a nice way to specify fonts through the use of classes, we
will now turn to the fonts themselves.
10.2
What Is A Font?
A font is a typeface. The origin of the word font is related to
fondue, like
dipping bread into melted cheese. The letters used in printing were originally
made from melted lead. (The distance between lines of text is still called
leading, pronounced led-ing.)
Fonts can affect the emotional response that users have to your webpage.
They can be heart-warming, amusing, or really annoying.
The use of interesting fonts can really spice things up. They are especially
nice for headings. It can be a problem if the body text gets too fancy because
CHAPTER 10. FONT FAMILIES
101
it makes text harder to read.
http://en.wikipedia.org/wiki/Font has a wonderful article giving historic
background and more.
For our purposes, a font is a set of letter shapes used to create a message.
10.2.1
Word Processing Font Choices
When using a word processor like Microsoft Word, a variety of
fonts, sometimes a huge variety, is available. And you can download and install
even
more. You can create your document and then render it as a printed document
with full confidence that your letters will look the way you want.
But one seldom spoken nightmare of word processing is document sharing.
A document may look beautiful on your own computer, but when you send
it to a friend and they open it, if they do not have the same fonts installed,
the document may look dramatically different, especially if you are using a
carefully-chosen but obscure font.
That is because the fonts are not part of the document. Fonts are sold
separately. The document says what fonts it wants, and the computer is
expected to provide those fonts. Sadly this problem can also apply to PDF
files.
The good news is that modern computers generally come with a large enough
collection of fonts that the document-sharing problem is often minimal.
10.2.2
Web Page Font Choices
Word processing programs, such as Microsoft Word, provide a
selection of
fonts that can be used in creating documents. Web designers would love to
have similar freedom in selecting fonts for their websites.
The document-sharing problem is much larger on the web. Your users may
be running Microsoft Windows, Mac OS X, Linux Ubuntu, Apple IOS, Android, or
who knows what else. They may be using Internet Explorer, Firefox, Chrome,
Safari, Opera, or who knows what else.
Getting your page to display the way you want, with the fonts you want, depends
on all your users having those same fonts, or something close enough.
It is not as easy as we might like.
CHAPTER 10. FONT FAMILIES
10.2.3
102
Raster vs Vector
Raster Fonts: Ultimately, fonts are rendered as pixels on the
user’s screen
or on a printed page. Raster fonts were used originally and are defined in
terms of these pixels. Basically, all screens are raster. Even the retinas of
our eyes are raster, with their individual cones and rods. If you magnify a
raster font, the curved edges eventually become pixelated or jagged.
Exam Question 177 (p.346): What kind of font represents shapes as
pixels?
Acceptable Answer: raster
Vector Fonts: To avoid jagged edges, it is desirable to define characters as
mathematical curves instead of a raster of pixels. Vector fonts are defined
in terms of the curves that describe each character, and those same curves
can generate raster images in a variety of sizes. Vector fonts are widely used
now. If you magnify a vector font, the edges always remain smooth.
Exam Question 178 (p.346): What kind of font represents shapes as
strokes?
Acceptable Answer: vector
Vector fonts are also called scalable fonts because they can be resized
(scaled) to different sizes without getting rough edges.
10.2.4
Copyright and Knock-Offs
Copyright does not cover raster character shapes. If it did, you
could copyright a font, and then print anything you want using that font, and
nobody could photocopy it because the individual characters were copyrighted.
Courts in the US have rejected that idea.
http://en.wikipedia.org/wiki/Intellectual_property_protection_of_
typefaces has more.
Instead, copyright and licensing do cover mathematical instructions for
drawing the shape of individual characters. This also includes kerning tables
that control the distance between characters. If you want the original font
in all its original glory, you need to get it from the original font designer
or
foundry.
Exam Question 179 (p.347): What does kerning control?
Acceptable Answer: distance between adjacent letters
CHAPTER 10. FONT FAMILIES
103
Kerning tables tell the browser that it can put the letters AV
closer together
than the letters
Comments
Post a Comment