CSS Font & Text style
-
Upload
yaowaluck-promdee -
Category
Education
-
view
1.923 -
download
0
Transcript of CSS Font & Text style
WDS CS KKU
Font C S S & H T M L
322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
Web Design Technology | 2015 1
Web Design Technology | 2015 2
WDS CS KKU
Index • Unit Style Sheet • CSS - Fonts • Example • Assignment
Web Design Technology | 2015 3
WDS CS KKU
Unit Style Sheet Relative Length • em – font size of element • ex- height of element’s font • percent- consists of a number
immediately followed by percent sign ‘%’
Web Design Technology | 2015 4
WDS CS KKU Unit Style Sheet (Cont.)
Absolute Length • in (inches; 1in=2.54cm =72pt =6pc)
Ex. 2in, 1.5in • cm (centimeters; 1cm=10mm) Ex. 2cm, 1.11cm • mm (millimeters) Ex. 50mm, 0.8mm • pt (points; 1pt=1/72in, 10pt = 12px) Ex.12pt, 20pt • pc (picas; 1pc=12pt) Ex. 1pc, 2pc • pixel (px) : pixel 1px is equal to 1/96th of 1in
Web Design Technology | 2015 5
WDS CS KKU
Recommended Occasional use Not recommended
Screen em, px, %
ex pt, cm, mm, in, pc
Print em, cm, mm, in, pt, pc, %
ex, px
a different set of units for display on screen than for printing on paper. The following table gives the recommended use:
Example
Web Design Technology | 2015 6
WDS CS KKU
h1 { line-height: 1.2em; } h1 { font-size: 1.2em; }
h1 { margin: 0.5in; } /* inches */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ h4 { font-size: 12pt; } /* points */ h4 { font-size: 1pc; } /* picas */ p { font-size: 12px; } /* px */
means that the line height of h1 elements will be 20% greater than the font size of h1 element.
means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
Web Design Technology | 2015 10
WDS CS KKU CSS-Font Property Description Values font-family Specifies the font family
for text Ex. Arial, Helvetica, sans-serif
font-size Specifies the font size of text
xx-small, x-small, small, medium, large, x-large,xx-large, smaller, larger, 18px, 70%, 150%
Web Design Technology | 2015 11
WDS CS KKU CSS-Font (cont.) Property Description Values
font-style The font-style property is mostly used to specify italic text.
normalitalicoblique
font-variant
In a small-caps font, all lowercase letters are converted to uppercase letters.
normalSmall-Caps
font-weight The font-weight property sets how thick or thin characters in text should be displayed.
normalboldbolderlighter100200
Web Design Technology | 2015 12
WDS CS KKU CSS-Font (cont.)
Font Size
The font-size property sets the size of the text.
p { font-size: 0.875em; /* 14px/16=0.875em */ }
xx-small, x-small, small, medium, large, x-large,xx-large, smaller, larger, 18px, 70%, 150%
Web Design Technology | 2015 13
WDS CS KKU CSS-Font (cont.)
Font Style • normal - The text is shown normally • italic - The text is shown in italics • oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
This is a paragraph in normal style. This is a paragraph in italic style. This is a paragraph in oblique style.
p.normal { font-style: normal;}
Web Design Technology | 2015 14
WDS CS KKU CSS-Font (cont.)
Font Family The font family of a text is set with the font-family property.
p { font-family: "Times New Roman", Times, serif; }
p.font1 { font-family: "Times New Roman", Times, serif; } p.font2 { font-family: Arial, Helvetica, sans-serif;}
Example1
Result
Web Design Technology | 2015 15
WDS CS KKU CSS-Font
Web safe fonts These fonts make up a group of a select few fonts that are available on most computers.
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } h1 { font-family: “myFristFont", sans-serif; }
https://www.web-font-generator.com/
Link web font generator
https://www.google.com/fonts
http://www.flaticon.com/font-face
Web Design Technology | 2015 16
WDS CS KKU Different Font Formats
TrueType Fonts (TTF) is the most common font format for both the Mac OS and Microsoft Windows operating systems. OpenType Fonts (OTF) OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. The Web Open Font Format (WOFF) WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. SVG Fonts/Shapes SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. Embedded OpenType Fonts (EOT) EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Web Design Technology | 2015 17
WDS CS KKU CSS-Font (cont.)
Example2
p { font-family:Arial; font-size:16pt; color:green } p.ex { font:15px sans-serif red; /*not specified */ }
<p> Example2</p> <p class=“ex”> Paragraph </p>
What’s the result?
Text
322432-1/2014
Property Description Values color The color property is used to set the color
of the text - a HEX value - like "#ff0000" - an RGB value - like "rgb(255,0,0)" - a color name - like "red"
direction The direction property specifies the text direction/writing direction
direction: ltr|rtl|initial|inherit;
line-height The line-height property specifies the line height.
line-height: normal|number|length|initial|inherit;
letter-spacing The letter-spacing property increases or decreases the space between characters in a text.
letter-spacing: normal|length|initial|inherit;
text-align The text-align property specifies the horizontal alignment of text in an element.
text-align: left|right|center|justify|initial|inherit;
http://www.w3schools.com/
WDS CS KKU
Text Property Description Values text-decoration The text-decoration property specifies
the decoration added to text. text-decoration: none|underline| overline| line-through|initial|inherit;
text-indent The text-indent property specifies the indentation of the first line in a text-block.
text-indent: length |initial |inherit;
text-transform The text-transform property controls the capitalization of text
None | capitalize | uppercase | lowercase | initial | inherit
white-space The white-space property specifies how white-space inside an element is handled.
Normal | nowrap | pre | pre-line | pre-wrap | initial | inherit
word-spacing The word-spacing property increases or decreases the white space between words.
word-spacing: normal | length | initial | inherit
http://www.w3schools.com/
WDS CS KKU
Web Design Technology | 2015
Web Design Technology | 2015 20
WDS CS KKU CSS3-Font/Text
• text-overflow • word-wrap • word-break
The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; }
p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }
<p>The following two paragraphs contains a long text that will not fit in the box.</p> <p>text-overflow: clip:</p> <p class="test1">This is some long text that will not fit in the box</p>
Web Design Technology | 2015 21
WDS CS KKU CSS3-Font/Text
The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line.
• word-wrap
p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; }
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
Web Design Technology | 2015 22
WDS CS KKU CSS3-Font/Text
p.test1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.test2 { width: 140px; border: 1px solid #000000; word-break: break-all; }
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p> <p class="test2">This paragraph contains some text. The lines will break at any character.</p>
Specifies line breaking rules for non-CJK scripts
• word-break
Web Design Technology | 2015 23
WDS CS KKU Text
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }
Example3
Web Design Technology | 2015 26
h1>This is using font "impact" size 2em. </h1> <p class="text2">font-family : Arial, Helvetica, sans-serif <br>
a first character is Big and italic font. <br> Color blue of first characterbut all content on this paragraph shown
grey color. word spacing:0.5em </p> <p class="text3"> I using text indent to show this paragraph. <br>
how to code CSS <span id="text3">and html </span> on this example. </p> <footer> web design technology </footer>
HTML CODE
Web Design Technology | 2015 27
WDS CS KKU Assignment#6
Create a Web page to present “CSS-Font design” from information provided using CSS font and text
Grade will be based on your CSS technique and look and feel of the Web page.
https://onedrive.live.com/view.aspx?resid=F333459734D737E5!1410&app=Word
“CSS-Font design”