Вэб хуудсан дээрх Фонтуудыг ашиглах
Текст контент нь үргэлж вэбсайтын чухал хэсэг байсан хэдий ч Вебийн эхэн үед вэбсайтууд дээрээ хийсэн хэвлэлийн хяналтанд дизайнерууд болон хөгжүүлэгчид маш хязгаарлагдмал байсан. Энэ нь фонтуудын хязгаарлалтыг багтаасан бөгөөд тэдний сайт дээр найдвартай ашиглах боломжтой болсон байна. Та өмнө нь дурдсан "вэб аюулгүй фонт" гэсэн нэр томъёог сонссон байх. Энэ нь тухайн хүний компьютерт багтах маш өндөр фонтуудыг илэрхийлж байгаа бөгөөд хэрэв танай сайт эдгээр фонтуудын аль нэгийг ашиглавал энэ нь хүний браузер дээр зөв болгоно гэсэн найдвартай бооцоо юм.
Өнөөдөр вэбсайтууд олон төрлийн шинэ фонтууд, төрөл бүрийн тохируулгуудтай ажилладаг бөгөөд тэдгээрийн нэг нь WOFF формат юм.
WOFF гэж юу вэ?
WOFF гэдэг нь "Вэб нээгдсэн фонт формат" гэсэн товчлол юм. Энэ нь CSS @ font-face property ашиглахад фонтуудыг тохируулахад хэрэглэгддэг. Вэб хуудсанд фонтуудыг оруулах арга юм. Ингэснээр та дээр дурдсан зарим аюулгүй байдлын фонтуудын зарим нь "Arial, Times New Roman, Georgia" гэсэн тусгай фонтуудыг ашиглаж болно.
WOFF нь W3C-д веб хуудсанд зориулж баглаа боодлын фондын стандарт болж өгсөн. Энэ нь 2010 оны 11-р сарын 16-нд ажлын төсөл болсон юм. Өнөөдөр бид WOFF 2.0-тай байна, энэ нь форматын эхний хувилбараас шахалтыг 30% -иар нэмэгдүүлдэг. Зарим тохиолдолд эдгээр хадгаламжууд нь бүр илүү их байж болно!
Яагаад WOFF ашиглах вэ?
Вэб фонтууд, түүний дотор WOFF форматаар дамжуулагдсан фонтууд нь бусад фонтуудын сонголтоос давуу талтай. Вэбсайтнуудын аюулгүй фонтууд нь ашигтай байхын зэрэгцээ манай ажлын фонтуудын хувьд ч гэсэн тэдгээрийн сонголтуудаа өргөжүүлж, хэвлэлийн сонголтуудыг нээх нь зүйтэй юм.
WOFF фонтууд дараах давуу талуудтай:
- Тэд зураг шиг фонтуудаас илүү хялбар байдаг. WOFF нь CSS-тай энгийн HTML текст, танд зураг авах боломж олгохгүй байх боломжийг олгодог.
- WOFF файлууд нь хэвлэлийн хэлбэрүүд болон хуучин хэв маягийн тоонууд гэх мэт бичиглэлийн мэдээллийг оруулдаг. Энэ нь зүгээр л ойролцоогоор зөв тэмдэгтүүдийг ашиглаж байгаа учраас энэ нь таны вэб хуудсуудыг илүү сайн бичиж өгдөг.
- WOFF фонтууд нь бусад хэлнүүдийн тэмдэгтүүдтэй фонтуудыг оруулж чаддаг тул интернационализаци хийхэд тусалж чадна.
- Бүх CSS загвартай текстийн адил, WOFF-тэй адил фонтууд нь илүү хайлтын системтэй байдаг. Хайлтын системүүд нь зураг дээр агуулагдсан текстийг "харах" биш бөгөөд ALT текст туслах үед текстийг орлох зүйл байхгүй.
- WOFF фонтууд нь шахагдсан учраас бусад төрлийн фонт файлуудаас бага байдаг. Энэ нь сайтын татаж авах хурд, ерөнхий гүйцэтгэлд тусална.
- WOFF файлуудыг WOFF файл болгон ашиглаж корпорацийн фонтуудыг ашиглан брэндийн таниулгааг хадгалах боломжтой.
WOFF Хөтөчийн дэмжлэг
WOFF нь орчин үеийн хөтөчүүдэд маш сайн браузерын дэмжлэг үзүүлдэг. Үүнд:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Энэ нь ерөнхийдөө удирдах зөвлөлийн дэргэд байгаа бөгөөд ганцхан Opera Mini-ийн бүх хувилбаруудтай.
WOFF фонтыг хэрхэн ашиглах талаар
WOFF файлыг ашиглахын тулд WOFF файлаа вэб сервертээ байршуулах хэрэгтэй. Үүний тулд @ font-face property гэсэн нэр өгөөд дараа нь CSS-д фонтоо оруулна уу. Жишээлбэл:
- MyWoffFont.woff гэгддэг фонтыг вэб серверийн / фонтын директор руу байршуулна уу.
- CSS файлдаа @ font-face хэсэгт нэмнэ үү:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') формат ('woff');
}
- Шинэ үсгийн нэрийг (myWoffFont) нэмж CSS үсгийн стек рүү өөр фонтын нэрийг нэмээрэй:
p {
font-family: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
WOFF фонтыг хаанаас авах вэ
Арилжааны болон арилжааны бус хэрэглээнд үнэ төлбөргүй WOFF фонтууд олдох боломжтой хоёр гайхамшигтай газрууд бий.
- Нээлттэй фонт номын сан
- Фонт хэрэм
Хэрэв та WOFF форматад байхгүй фонт ашиглах лицензтэй бол WOFF-ийн үүсгэгчийг Font Squirrel дээр ашиглаж болно. Ингэснээр таны фонт файлуудыг WOFF файл руу хөрвүүлэх боломжтой. Macintosh, Windows дээр та TrueType / OpenType фонтыг WOFF руу хөрвүүлэх боломжтой sfnt2woff нэртэй тушаалын мөрний хэрэгсэл байдаг.
Өөрийн системд тохирох хоёртын файлыг татаж аваад тушаалын мөрөнд (эсвэл Терминал) ажиллуулаад зааврыг дагана уу.
Жишээ нь
WOFF файлуудын цөөн хэдэн жишээ нь: WOFF Page 24 HTML5 дээрх 24 цагийн хуудас.
Женнифер Кэрнин эх нийтлэл. 7-р сарын 17-нд Жереми Герард засварлав