Fonts And Colors Flashcards
Which rule allows you to define the name and location of a font in my page?
@ font-face
What does ttf mean?
True type font .ttf
What does otf mean?
Open type font .otf
It was built on top of ttf and is newer
What is .eot?
Compact form of ttf, proprietary to IE
What is .svg?
Scalable vector graphics font used to represent characters
Which font format is best supported across most browsers?
Woff
Name the five font families
Serif Sans serif Cursive Monospace Fantasy
How do you specify a font with multiple words in its name?
Put quotes around the name in the font family declaration
Five steps to add a web font to your page?
1) find a font
2) determine font format (.woff is best)
3) place font files on the web
4) add the @font-face property to your CSS
5) use the font-family name in your CSS
Where can you find open source, free fonts?
Fontsquirrel
What are the 7 keyword font sizes?
xx-small x-small small medium large x-large xx-large
What are your four choices in specifying font sizes?
Keyword
px
em
percentage
What is best practice for sizing font?
Use keyword font size in the body element and specify the font size of your other elements relative to the default size using percentages
em means
The font size of the parent element
@ import rule allows you to import other CSS files rather than a “link” in your HTML. T or F?
True
What does @ media allow you to do?
Create CSS rules that are specific to certain media types
Name a resource that will manage the fonts and CSS for you.
Google web font service google.com/webfonts
How to bold text
font-weight : bold ;
How to italicize text
font-style : italic ;
The three ways to specify colors in CSS
1 name the color (16 basic colors)
body { background - color : silver ; }
2 RGB
body { background - color : RGB ( 80% , 40% , 0% ) ; }
3 hex code
body { background - color : # cc 66 00 ; }
What is hex short for?
Hexidecimal system
The hex system allows two alpha numerical digits to represent from zero to ___
255
Always start hex code with
#
You can abbreviate hex codes if each two digit pair has the same
#
For example, # ccbb00 can be shortened to # cb0
The color property specifies the color of
Text
Which element is usually shown as a strike through (meaning you want to delete it)
< del >
Name the element used to indicate you want to add text (usually shown as underlined)
ins
How do you turn off bold style?
font-weight : normal ;
What’s the difference between italic and oblique?
Both are slanted to the right but italic adds extra curls to the serifs
For web or computer colors, where 100% of red, blue and green intersect, the color is
White
60% of R and G and B mixed will produce
Gray
How do you get black in RGB?
0% red 0% green 0% blue
What are the two ways to specify colors in RGB?
Percent or numeric values
For # cc6600 what is the value of cc?
The c on the right is 12
The c on the left is 12 x 16 or 192
192 + 12 is 204
What are the “numbers” in the hex system?
0-9 then A-F for a total if 16 digits
Web safe colors are pretty much a thing of the
Past
I know it’s a standard font format for web fonts, but what does .woff mean?
Web open font format
