Course schedule

Advanced CSS tutorial

• CSS Extra Book
• CSS Introduction
• CSS Basic Syntax
• CSS Advanced Syntax
• CSS Derived Selector
• CSS ID Selector
• CSS Class Selector
• CSS Creation
• CSS Background
• CSS Text
• CSS Font
• CSS List

CSS box model

• CSS Box Model Overview
• CSS Padding
• CSS Border
• CSS Margin
• CSS Margin Collapsing

CSS positioning

• CSS Positioning Overview
• CSS Relative Positioning
• CSS Absolute Positioning
• CSS Floating

CSS selector

• CSS Element Selector
• CSS Selector Grouping
• CSS Class Selector Detailed
• CSS ID Selector Detailed
• CSS Attribute Selector Detailed
• CSS Descendant Selector
• CSS Child Element Selector
• CSS Adjacent Sibling Selector

Elective course

Course recommendation:

• CodeW3C.com Treasure Box

CSS font attribute defines the font family, size, boldness, style (such as italic) and transformation (such as small caps) of the text.

CSS Font Series

Sa CSS, mayroong dalawang uri ng pangalan ng serip ng font:

• Pangkalahatang serip ng font - isang kombinasyon ng sistema ng font na may kahawig na hitsura (tulad ng "Serif" o "Monospace")
• Tinukoy na serip ng font - tiyak na serip ng font (tulad ng "Times" o "Courier")

Hindi lamang ang mga tiyak na serip ng font, naglalagay ang CSS ng 5 uri ng pangkalahatang serip ng font:

• Serif Font
• Sans-serif Font
• Monospace Font
• Cursive Font
• Fantasy Font

Kung nais mong mas malaman tungkol sa serip ng font, basahin ang CSS Font Series.

Tinukoy na serip ng font

Gumamit ng Attribute ng font-family Tinukoy ang serip ng font ng teksto.

Gumamit ng pangkalahatang serip ng font

Kung gusto mong gamitin ang sans-serif font para sa dokumento, ngunit hindi ka nagmamalasakit kung anong font ang gagamitin, ang sumusunod ay isang magandang deklarasyon:

body {font-family: sans-serif;}

Subukan nang personal

Ang user agent ay magpili ng isang font mula sa sans-serif serip ng font (tulad ng Helvetica) at mag-aplay ito sa body elemento. Dahil sa pagpapatuloy, ang pagpili ng font na ito ay mag-aplay din sa lahat ng elemento na kasama sa body elemento, maliban kung mayroong mas tiyak na selector na magbabawas nito.

Tinukoy na serip ng font

Hindi lamang sa pamamagitan ng pangkalahatang serip ng font, maaari ka ring mag-set ng mas tiyak na font sa pamamagitan ng font-family attribute.

Ang sumusunod na halimbawa ay nagtatakda ng Georgia font para sa lahat ng h1 elemento:

h1 {font-family: Georgia;}

Subukan nang personal

Ang patakaran na ito ay magbibigay ng isa pang problema, kung ang user agent ay walang nakapag-install na Georgia font, maaaring gamitin lamang ang default na font ng user agent para sa pagpapakita ng h1 elemento.

Maaari naming lutasin ang problema na ito sa pamamagitan ng pagkakasama ng espesyal na pangalan ng font at pangkalahatang serip ng font.

h1 {font-family: Georgia, serif;}

Subukan nang personal

Kung ang reader ay hindi nag-install ng Georgia, ngunit nag-install ng Times font (isang font sa serif na serip ng pamilya), ang user agent ay maaaring gamitin ang Times para sa h1 elemento. Kahit na ang Times ay hindi ganap na tumutugma sa Georgia, ayon pa rin ito ay sapat na malapit.

Kaya namin inirerekomenda na ibigay ang isang pangkalahatang serip ng font sa lahat ng font-family na patakaran. Ito ay nagbibigay ng isang backup, kung ang user agent ay hindi makakapagbigay ng espesyal na font na tumutugma sa patakaran, maaaring piliin ang isang kandidatong font.

Kung kaayon ka sa font sa napakatunayon, maaari ka ring magbigay ng isang serye ng kahawig na font sa binigay na elemento. Upang gawin ito, kailangan mong ilagay ang mga font ayon sa prayoridad, at pagkatapos ay kumonekta nila ng kumon

p {font-family: Times, TimesNR, 'New Century Schoolbook',}
     Georgia, 'New York', serif;}

Subukan nang personal

Ayon sa listahan na ito, ang user agent ay maghahanap sa mga font sa pagkakasunod-sunod ng listahan. Kung ang lahat ng nangalathala ng font ay hindi magagamit, magiging simple na pinili ang isang magagamit na serif font.

Paggamit ng bungkalin

Maaaring nating napansin, ang mga halimbawa sa itaas ay ginamit ang simple na bungkalin. Tanging kapag may isang o ilang espasyo sa pangalan ng font (tulad ng New York), o kapag ang pangalan ng font ay kasama ng simbolo tulad ng # o $, kailangang maglagay ng bungkalin sa pag-deklara ng font-family.

Maaaring gamitin ang isang simple o dalawang titik na bungkalin. Subalit, kung maglagay ka ng font-family atribute sa style atribute ng HTML, kailangang gamitin ang uri ng bungkalin na hindi ginamit ng atribute na iyon:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...

Subukan nang personal

Font style

Atribute na font-stylePinaka ginagamit upang tukuyin ang oblique na teksto.

Ang atribute na ito ay may tatlong halaga:

• normal - ang teksto ay lumalabas na normal
• italic - ang teksto ay lumalabas na nakakaslantang itlog
• oblique - ang teksto ay lumalabas na nakakagayo-gayo

Halimbawa

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Subukan nang personal

Pagkakaiba ng italic at oblique

Ang font-style ay napakasimple: ginagamit upang piliin ang normal na teksto, italic na teksto at oblique na teksto. Ang kaisa-isang kumplikado dito ay ang pagtutukoy ng pagkakaiba ng italic at oblique na teksto.

Ang italic - isang simpleng estilo ng font, na may maliit na pagbabago sa istraktura ng bawat titik upang sumalamin sa pagbabago ng hitsura. Sa kabilang banda, ang oblique na teksto ay isang salin ng normal na patag na teksto na nakakagayo-gayo.

Sa pangkaraniwang sitwasyon, ang italic at oblique na teksto ay lumalabas na magkapareho sa web browser.

Font style

Atribute na font-variantMaaaring itakda ang maliliit na kapital.

Maliliit na kapital na bato ay hindi pang-usual na kapital, hindi rin ito maliliit na bato, ang ganitong bato ay gumagamit ng iba't ibang laki ng kapital.

Halimbawa

p {font-variant:small-caps;}

Subukan nang personal

Pagpabutihin ng font

Atributo ng font-weightItakda ang kaguluhang teksto.

Gumamit ng keyword na bold upang itakda ang teksto bilang malakas.

Ang keyword na 100 ~ 900 ay nagtatakda ng 9 na antas ng pagpabutihin sa font. Kung ang isang font ay may binuo na mga antas ng pagpabutihin, ang mga numero na ito ay direktang napapatnugot sa predefinidong antas, 100 ay tumutukoy sa pinakamaliit na font transformation, 900 ay tumutukoy sa pinakamalakas na font transformation. Ang numero 400 ay katumbas ng normal, at 700 ay katumbas ng bold.

Kung itinakda ang pagpabutihin ng elemento bilang bolder, magtatakda ang browser ng mas malalakas na font kaysa sa inang halaga. Sa kabilang banda, ang keyword na lighter ay magiging mas liwalas kaysa sa mas malalakas.

Halimbawa

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Subukan nang personal

Laki ng font

Atributo ng font-sizeItakda ang laki ng teksto.

Ang kakayahan na pamahalaan ang laki ng teksto ay napaka-mahalaga sa larangan ng web design. Subalit, hindi dapat mong gamitin ang pag-iadjust ng laki ng teksto upang gawing parang header ang pahina, o gawing parang pahina ang header.

Palaging gamitin ang tamang HTML na header, tulad ng paggamit ng <h1> - <h6> upang tandaan ang header, at gamitin ang <p> upang tandaan ang pahina.

Ang halaga ng font-size ay maaaring maging tiyak o relatibong halaga.

Tiyak na halaga:

• Itakda ang laki ng teksto sa tiyak na laki.
• Hindi payagan ang gumagamit na baguhin ang laki ng teksto sa lahat ng browser (hindi magaganda sa paggamit)
• Ang tiyak na laki ay napaka-kapaki-pakinabang kapag tinatayo ang pisikal na laki ng output.

Relatibong laki:

• Itakda ang laki ng teksto sa pamamagitan ng mga elemento sa paligid.
• Payagan ang gumagamit na baguhin ang laki ng teksto sa browser.

Babala:Kung hindi iyong itinakda ang laki ng font, ang default na laki ng pangkaraniwang teksto (tulad ng pahina) ay 16 pixels (16px=1em).

Gumamit ng pixels upang itakda ang laki ng font.

Sa pamamagitan ng pagtatakda ng laki ng teksto sa pixels, maaaring ganap na kontrolin ang laki ng teksto:

Halimbawa

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Subukan nang personal

Sa Firefox, Chrome, at Safari, maaaring iadjust ang laki ng teksto ng mga halimbawa sa itaas, ngunit hindi ito mangyayari sa Internet Explorer.

Bagaman maaaring iadjust ang laki ng teksto gamit ang tool ng pag-zoom ng browser, ito ay kung saan ito ay isasaayos ang buong pahina, hindi lamang ang teksto.

Gumamit ng em upang itakda ang laki ng font.

Para makaiwas sa problema na hindi mawawala ang teksto sa Internet Explorer, gumagamit maraming developer ng em na yunit upang kahalili ng pixels.

Inirerekomenda ng W3C ang paggamit ng sukat na em.

1em ay katumbas ng kasalukuyang laki ng font. Kapag ang font-size ng isang elemento ay 16 pixel, para sa elemento na iyon, 1em ay katumbas ng 16 pixel. Kapag inilagay ang laki ng font, ang halaga ng em ay magbabago kaugnay sa laki ng font ng parent element.

Ang default na laki ng teksto sa browser ay 16 pixel. Kaya ang default na laki ng 1em ay 16 pixel.

Maaaring gamitin ang sumusunod na formula upang i-convert ang pixel sa em:pixels/16=em

(Bilang paunlarawan: 16 ay katumbas ng default na laki ng font ng parent element, kung ang default na font-size ng parent element ay 20px, dapat baguhin ang formula:pixels/20=em

Halimbawa

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Subukan nang personal

Sa pagkakaroon ng halimbawa, ang laki ng teksto na may sukat na em ay katumbas ng teksto na may sukat na pixel sa nakaraang halimbawa. Gayunpaman, kapag ginagamit ang sukat na em, maaring ayusin ang laki ng teksto sa lahat ng browser.

Malungkot na, mayroon pa ring problema sa IE. Kapag inire-set ang laki ng teksto, ito ay mas malaki o mas maliit kaysa sa normal na laki.

Ginagamit ang porsyento at EM

Ang pinakamabuting plano upang gumana sa lahat ng browser ay ilagay ang default na halaga ng font-size sa body elemento (parent element) na ito sa porsyento:

Halimbawa

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Subukan nang personal

Ang aming code ay napakapagkakaroon. Maipapakita sa lahat ng browser ang parehong laki ng teksto, at pinahihintulutan ang pagzoom sa laki ng teksto ng lahat ng browser.

CSS Font Attribute

Toolbox

CSS Reference Manual

CSS Examples

CSS Quiz

CSS Tutorial

Sponsor Links