Мэдээжийн хэрэг, таны WordPress сайтад Google вэб фонтыг ашиглах өөр өөр залгаасууд байдаг, гэхдээ хэрэв та өөрийн сэдвийг боловсруулж байгаа бол залгаасуудыг алгасахгүйгээр сонгосон хэв маягаа сайтар холбох хэрэгтэй. Доор бид Google Web Fonts-ыг өөрийн сэдэвт хэрхэн ашиглахыг харуулах болно.

Эхлээд сайт руугаа орцгооё Google вэб фонтуудмөн сэдэвт хэрэглэх шаардлагатай фонтыг сонгоно уу. Зүүн талд байрлах тусгай хэрэгслүүдийн тусламжтайгаар та хайлтын талбарыг нарийсгаж болно, учир нь үнэхээр олон фонт байдаг. Би гарчиг болон блогийн гарчигт тод serif үсгийн фонт хэрэгтэйг мэдэж байсан тул "Ангилал" унадаг цэснээс serif-ийг сонгоод, дараа нь Зузаан гулсагчийг баруун тийш зөөв.

Үүний үр дүнд надад санал болгосон 617 сонголт 5 болж хасагдсан. Танд дуусгах цөөн хэдэн сонголт байна. урьдчилан харахфонтууд - сонгосон фонтоор үг, өгүүлбэр, текстийн догол мөр, зурагт хуудас хэрхэн харагдахыг харж болно. Та урьдчилан тодорхойлсон текстийг сонгож, өөрийн текстийг тохируулж, хүссэн үсгийн хэмжээг сонгож болно.

Та өөрийн сайт дээр ашиглахыг хүсч буй фонтоо олсны дараа Цуглуулгад нэмэх товчийг дарна уу.

Та цуглуулгадаа хэдэн арван фонт нэмж болно. Гэсэн хэдий ч энэ нь үргэлж шаардлагатай байдаггүй. Та үүнийг хийж чадна гэдэг нь хийх ёстой гэсэн үг биш юм. Өөрийгөө дээд тал нь гурван фонтоор хязгаарлахыг хичээ. Илүү сайн, хоёр. Гүйцэтгэлийн шалтгааны улмаас би сайтын үндсэн текстэнд вэбийн аюулгүй фонтыг ашиглах, мөн гарчиг болон онцгой анхаарал хандуулах шаардлагатай бусад элементүүдэд вэб фонтыг хадгалах дуртай хэвээр байна. Үсгийн фонтыг уншихад болгоомжтой байгаарай - хэрэв зочлогчид юу бичсэнийг ойлгохгүй байвал гялалзсан фонт бүү ашигла.

Цуглуулгад фонт нэмэхэд сайтын доод хэсэгт байрлах цэнхэр хэсэгт харагдах болно. Цуглуулгадаа ашиглахыг хүссэн фонтуудаа авмагцаа Use товчийг дарна уу.

Үүний дараа таныг дөрвөн алхамтай зааварчилгааг харуулах дэлгэц рүү аваачна. Үүнээс та фонтыг хэрхэн ашиглах талаар сурах болно. Хэрэв та ашиглахаар сонгосон фонтуудыг татаж авахыг хүсвэл график засварлагчТэдгээрийг үнэлэх эсвэл өөрийн сэдэвт сонирхолтой screenshot.png авахын тулд та хуудасны хамгийн дээд хэсэгт байрлах Фонтуудыг татаж авах товчийг дарахад л хангалттай. Хэрэв та зүгээр л загвартаа фонт ашиглахыг хүсч байвал үүнийг компьютер дээрээ татаж авах шаардлагагүй.

Эхний алхамд та оруулсан үсгийн хэв маяг, жинг сонгох боломжтой. Хоёрдахь алхамд та оруулахыг хүсч буй тэмдэгтийн багцаа сонгож болно. Та мөн таны фонтын цуглуулга хуудас ачаалах хурдад хэрхэн нөлөөлөхийг үнэлж болно.

Одоо бид гурав дахь алхам руу шилжиж байна, энэ нь өмнөх шиг амар биш юм. Гурав дахь алхамд бид сайтууддаа нэмэх шаардлагатай кодыг авдаг - гурав өөр өөр сонголтууд. Стандарт сонголтыг сонгох - Гэсэн хэдий ч бид WordPress-ийн сэдэвт загвар нэмэх тогтсон аргуудыг дэмжихийн тулд Google-ийн удирдамжаас бага зэрэг хазайх болно. Стандарт хувилбарын кодонд бид зөвхөн холбоосын хаягийн href атрибут гэж заасан URL-г хуулдаг.

Дараа нь тухайн сэдвийн functions.php файлыг нээнэ үү. Бид өөрсдийн сэдэвт ашиглах CSS-г ачаалах функцийг үүсгэнэ:

Функц ggl_load_styles() ( )

Миний функц дээрх ggl угтварыг харж байна уу? Энэ бол амжилттай WordPress практикуудын нэг юм. Сэдэв, хүүхдийн сэдэв эсвэл залгаасуудын бусад функцуудтай зөрчилдөх эрсдэлийг бууруулахын тулд WordPress функцийнхээ нэрсийг үргэлж угтвараар оруулаарай.

Одоо энэ функцэд бид Google-ээс хүлээн авсан загварын хүснэгтээ бүртгүүлэх хэрэгтэй:

Функц ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

Бид wp_register_style функцийг ашиглаж байна. Эхний аргумент нь тодорхойлогч, i.e. Бид энэ загварын хүснэгтийг хожим кодынхоо товчлолд ашиглах боломжтой. Хоёрдахь аргумент нь файлд хүрэх зам юм. Бид Google-ийн зааврын гурав дахь алхамд хүлээн авсан URL-г ашиглаж байна.

Дараа нь бид сэдэвийнхээ үндсэн хэв маягийн хуудсыг оруулав. Та header.php файлынхаа толгой хэсэгт холбоос хаяг тавиагүй гэж найдаж байна уу? Хэрэв тийм бол файл руу буцаж очоод энэ кодыг устгана уу. Дараа нь functions.php файлд загварын хүснэгтийг оруулна уу:

Функц ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), массив("googleFont")); ) )

Бид wp_enqueue_style функцийг ашиглаж байна. Энэ нь wp_register_style-тай ижил аргументтай. Нэгдүгээрт, бид тодорхойлогчийг загварын хуудас руу холбодог. Дараа нь бид загварын хуудсандаа хүрэх замыг олж авдаг. Аз болоход, WordPress дээр та get_stylesheet_uri() функцийг ашиглан замыг авах боломжтой. Дараа нь бид хамаарлыг зааж өгнө. Манай style.css файл нь Google Web Fonts загварын хуудаснаас хамаарна.

Эцэст нь бид wp_enqueue_scripts дэгээ ашиглан функцээ дууддаг:

Функц ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

functions.php файл дууссан. Одоо бид сонгосон фонтыг ашиглах сүүлчийн алхамыг хийх ёстой. Дөрөв дэх алхам Google зааварфонтыг ашиглахын тулд font-famili шинж чанар руу ямар утгыг дамжуулах шаардлагатайг харуулж байна. Би бүх гарчигаа Holtwood One SC фонтоор хиймээр байна:

h1, h2, h3, h4, h5, h6 (фонт-гэр бүл: "Holtwood One SC", serif; )

Мөн би сайтын тайлбарыг Rouge Script фонтоор хийхийг хүсч байна:

Сайтын тайлбар (фонт-гэр бүл: "Rouge Script", курсив; )

Бүгд! Өөр юу ч хийх шаардлагагүй! Та өөрийн WordPress загварт Google Web Fonts нэмсэн. Тэдгээрийг хариуцлагатай ашигла!

Сайн байцгаана уу эрхэм уншигчид. Өнөөдөр бид google фонтууд (google вэб фонтууд), тэдгээрийг хэрхэн татаж авах, сайт руу холбогдох талаар ярих болно.

Би сайт руу очдог www.google.com/fonts/, баруун талд байгаа шүүлтүүрээс: 1. хүссэн категори, 2. шаардлагатай бол тэдгээрийг ангилж, 3. бидэнд хэрэгтэй хэлийг сонгоно уу (хэрэв танд зүүн талын цэсэнд орос фонт хэрэгтэй бол, сонгоно уу. Кирилл).

Тиймээс бид фонтыг сонгосон, одоо та түүний хэв маягийг сонгох хэрэгтэй, үүний тулд самбарыг доороос нь өргөжүүлнэ үү ( Сонгох шүүгээг нээнэ үү) болон таб руу очно уу ТОХИРУУЛАХмөн хүссэн загвар, хэлээ сонгоно уу.

Татаж авах бол товчлуур дээр дарна уу татаж авах.

Татаж авсан фонтыг холбож байна

Архивт байгаа фонтуудыг HTML сайтын /css хавтастай нэг директор дотор байх ёстой /fonts хавтас руу хуулна уу.

Стандарт холболттатаж авсан фонтуудийм харагдаж байна

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file" .woff") format("woff"), url("FontFileName.ttf") format("truetype"), url("FontFileName.svg#DSNoteRegular") format("svg"); үсгийн жин: хэвийн; фонт -хэв маяг: хэвийн;)

Миний хувьд холболт иймэрхүү харагдах болно

/* /css/style.css-д фонт оруулах код */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font- хэв маяг: хэвийн; үсгийн жин: хэвийн; )

Өөрийн сонгосон фонтыг сайт руу холбохын тулд таб руу очно уу оруулах, тэнд та холбогдох 2 аргыг харах болно:

1 СТАНДАРТ

Өгөгдсөн кодхэсэгт нэмж оруулах ёстой таны HTML баримт бичиг.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Чухал. Холболтын аргаас үл хамааран эдгээр гэр бүлүүдийг тодорхойлохын тулд дараах CSS дүрмийг ашиглана уу: font-family: 'Roboto', sans-serif; энэ талаар доор дэлгэрэнгүй үзнэ үү.

Google Фонт нь үнэгүй вэб фонтуудын хамгийн сайн эх сурвалжуудын нэг бөгөөд Google нь танд тэдгээрийг вэбсайтдаа импортлох хэд хэдэн аргыг санал болгодог. Харамсалтай нь тэдгээрийн аль нь ч алдартай WordPress хөдөлгүүрийг агуулдаггүй. Энэ нь та олон тооны залгаасуудыг ашиглах, эсвэл кодоор гараа бохирдуулах хэрэгтэй гэсэн үг юм.

Сайн мэдээ гэвэл та Google номын сангаас ямар ч фонтыг бараг ямар ч WordPress сэдэв дээр төвөггүй суулгаж болно. Яг яаж - бид өнөөдөр танд заах болно.

Хоёр сонголт байна - залгаасыг холбох эсвэл functions.php файлтай бага зэрэг тоглох.

Гэхдээ эхлээд ашиг тусыг нь жагсаахыг хүсч байна Google-ийн сул талҮсгийн фонтууд нь тэдгээрийг төсөлдөө ашиглах эсэхээ шийдэх боломжтой болно.

Сайн ба муу Google вэб фонтууд

Вэб фонтуудын тухайд Google-ийн нэг юм хамгийн сайн сонголтууд гүйцэтгэлийн хувьд . Энэ бүхэн хөнгөн дизайн, кэшийн системтэй холбоотой. Зочид Google-ийн фонтыг ашигласан сайтад саяхан зочилсон бол ачаалахыг хүлээх шаардлагагүй. Open Sans зэрэг алдартай фонтууд нь ачаалах хугацааг багасгах замаар таны сайтын гүйцэтгэлийг сайжруулж чадна.

Өөр нэг онцлог нь тэр Google танд эдгээр фонтуудыг татаж авах боломжийг олгодог , ингэснээр та тэдгээрийг байршилдаа ашиглах боломжтой.

Мөн эцэст нь платформ нь бүрэн үнэ төлбөргүй байдаг . Фонтуудыг ашиглаж эхлэхийн тулд та нэвтэрч орох эсвэл эхлүүлэхэд л хангалттай Шуудангийн хайрцаг Gmail дээр (хэнд өнөөдөр Gmail байхгүй вэ?).

Алдаа дутагдлуудаас та үүнийг зааж өгч болно google фонтуудын сонголт бага байна тэдгээрийн олонх нь бие биетэйгээ төстэй байдаг. Зохистой, анхны фонт олохын тулд та маш их цаг зарцуулах хэрэгтэй. Кирилл үсгийн фонт маш цөөхөн.

Үүнээс гадна нийтлэг байдаг аюулгүй байдлын асуудал - Та өөрийн сайт дээр Google-ээс фонт суулгахдаа хувийн мэдээллээ өгөх шаардлагатай.

WordPress залгаасуудыг ашиглан Google фонтуудыг хэрхэн суулгах талаар

Хэрэв та залгаасуудыг хайж байгаа бол хайлтын үр дүнд харагдах хамгийн эхний зүйл бол WP Google Fonts болон Easy Google Web Fonts залгаасууд . Эдгээр нь үнэхээр хамгийн шилдэг хоёр залгаас юм.

Plugins нь хамгийн тохиромжтой шийдэл биш юм Google суулгацууд WordPress сайт дээрх фонтууд - зөвхөн гүйцэтгэлийн хувьд төдийгүй залгаасууд нь текстийн зарим хэсгийг сонгохыг зөвшөөрдөггүй. Гэсэн хэдий ч, хэрэв та эсвэл таны үйлчлүүлэгч залгаасуудыг ашиглах нь илүү дээр гэдэгт итгэлтэй байгаа бол эдгээр хоёр сонголтыг үзээрэй.

Энэхүү залгаас нь H1 гарчиг, догол мөр, ишлэл зэрэг тодорхой элементүүдийг чиглүүлэх боломжийг танд олгоно. Та мөн өөрт тохирсон CSS сонголтыг авах болно цаашдын ажилхувь хүний ​​үсгийн хэв маягтай. Энэхүү залгаасыг ашиглан WordPress сайт дээрээ Google фонт нэмэх, өөрчлөх нь маш хялбар юм.

Хялбар Google Вэб Фонтууд нэрэндээ тохирсон бөгөөд Google Fonts-ийг анхлан суралцагчдад хүртэл маш хялбар болгодог. Та Live Preview функцийг ашиглан вэб сайтаас гаралгүйгээр фонтуудыг үзэх, турших, оновчтой болгох, нэг мөр код бичихгүйгээр өөрийн үсгийн дүрмийг бий болгох боломжтой.

Google фонтыг WordPress загварт суулгах зөв арга

Эцэст нь бид functions.php файлыг нээж, кодоор бага зэрэг тоглох боломжтой. Үүнийг хийхийн өмнө та Google номын сангаас фонт сонгох хэрэгтэй. Жишээ болгохын тулд маш алдартай зүйлийг авч үзье Нээлттэй Sans.

Дараа нь та үсгийн хэв маягийг сонгох хэрэгтэй - ердийн, тод эсвэл налуу. Та өөрөө хийж болно :)

Загварыг сонгосны дараа Google танд кодын хэсгийг өгөх болно. Манайх иймэрхүү харагдаж байна:

Нэмж дурдахад бид CSS загвартай болсон:

font-family: "Open Sans", sans-serif;

Одоо functions.php файлыг нээх цаг болжээ (файлын зам: wp-content/themes/yourtheme). Файлын төгсгөлд шинэ функц нэмнэ үү:

функц load_fonts()
{
wp_register_style("et-googlefonts",
"http://fonts.googleapis.com/css?family=Open+Sans: 300 натал, 400, 700, 400,700,300"); wp_enqueue_style("et-googlefonts");
}
add_action("wp_print_styles", "load_fonts");

Энэ функцийн гол түлхүүр нь "wp_enqueue_style" команд бөгөөд энэ нь WordPress-ийг хуудас бүрийн толгой хэсэгт фонтын загварын хуудас руу залгахад хүргэдэг. Хэрэв та анхааралтай ажиглавал бид Google-ийн өгсөн кодноос href= болон rel='stylesheet' type'text/css' холбоосыг устгасан болохыг харах бөгөөд хэрэв та өөр Google фонт нэмэхийг хүсвэл мөн адил хийх шаардлагатай болно. таны WordPress сайт.

Таны хийх ёстой зүйл бол үндсэн CSS файлыг нээж, Open Sans загвараар буулгахад л хангалттай. Энд ердийн дүрэм мөрдөгдөж байгаа тул дараах кодыг загварын хүснэгтдээ нэмж, хадгалаад шинэчилнэ үү.

бие
{
фонт: ердийн 1em "Open Sans", sans-serif;
өнгө: #313131;
}

Энэ хэв маяг нь сайт даяар ажиллах болно. Та текстийн тусдаа хэсгүүдэд өөр хэв маягийг тохируулж болно:

Тод текст
{
фонт: bold 1em "Open Sans", sans-serif;
}

Таны харж байгаагаар энэ нь үнэндээ маш энгийн. Үр дүнг нь шалгаад үзээрэй :)

Бүлгийн эхний хэсэг нь танилцуулгад зориулагдсан болно CSS фонтууд. Энэ хуудсан дээр та CSS-д фонтыг хэрхэн оруулах, вэб фонт гэж юу болох, тэдэнтэй хэрхэн ажиллах, ямар фонтын форматууд байдаг, Google Fonts хэрхэн ашиглах талаар сурах болно. Эхлээд CSS фонт оруулах энгийн жишээг харцгаая.

P (фонт-гэр бүл: Вердана; )

Энэ жижиг кодын хэсэг нь бүх шошго гэсэн үг юм

Вердана фонт ашигласан. Font-family шинж чанар нь ямар фонт эсвэл фонт-гэр бүлийг ашиглахыг тохируулдаг. Хэрэглэгчийн хөтөч дээр энэ хэв маягийг зөв харуулах нь тухайн фонтыг хэрэглэгчийн компьютер дээр суулгасан эсэхээс хамаарна. Манай тохиолдолд хэрэглэгчийн компьютерт Verdana фонт байхгүй бол хөтөч нь үндсэн фонтыг харуулах болно.

Нэгэн цагт дизайнерууд хэрэглэгчийн компьютер дээр гол нь байхгүй тохиолдолд хэд хэдэн нөөц фонтыг нэмж зааж өгөх шаардлагатай болдог. Та Вердана хэл дээрх текстээ загварчилж, Trebuchet MS, Geneva болон ямар ч sans-serif фонтыг нөөц хэлбэрээр ашиглахыг хүсч байна гэж бодъё. Үүнийг ингэж бичсэн байна.

P (фонт-гэр бүл: Вердана, "Требучет МС", Женева, sans-serif; )

Энэ кодыг боловсруулахдаа хөтөч эхлээд хэрэглэгчийн компьютер дээр Verdana фонт байгаа эсэхийг шалгана. Хэрэв фонт байгаа бол шошгоны агуулга

Энэ фонтоор харуулав. Хэрэв фонт байхгүй бол хөтөч жагсаалтын дараагийн фонт болох Trebuchet MS-ийг шалгана. Хэрэв энэ фонт бас байхгүй бол дараагийн фонт Женева байгаа эсэхийг шалгана. Хэрэв хэрэглэгчийн компьютерт бас Женев байхгүй бол хөтөч өөр боломжтой sans-serif фонтыг сонгоод текстийг харуулах болно.

Жич:кодонд бид Trebuchet MS үсгийн нэрийг хашилтанд бичсэн. Фонтын нэрийг хоосон зайтай тохиолдолд давхар эсвэл дан хашилтанд оруулах шаардлагатай.

Та Wikipedia хуудаснаас serif (serif) болон байхгүй (sans-serif) бүхий фонт гэж юу болохыг уншиж болно.

Вэб фонтууд

Фонт ашиглах дээрх арга нь асар их сул талтай - та үсгийн тоогоор хязгаарлагддаг. Та зөвхөн ихэнх компьютер дээр суулгасан сонголтуудад сэтгэл хангалуун байх хэрэгтэй болно.

Хуудасны дизайныг хувь хүн болгох, өвөрмөц байдлыг нэмэхийн тулд фонтын сонголтыг хэрхэн нэмэгдүүлэх вэ? Вэб фонтууд аврах ажилд ирдэг. Энэ бүлгийг цааш нь уншаад та тэдэнтэй хэрхэн ажиллах талаар сурах болно.

Тиймээс хэрэглэгчийн хөтөч дээр хүссэн фонтыг харуулахын тулд бид энэ фонтыг түүний компьютерт татаж авах хэрэгтэй. Үүнийг хийхэд маш амархан. Фонтуудыг CSS-тэй холбох энэ арга нь дизайнеруудад үнэхээр өргөн боломжийг нээж өгдөг. Гэхдээ тосонд ялаа гэдгийг дурдах нь зүйтэй: нэгдүгээрт, хөтөч бүр тодорхой фонтын форматыг дэмждэггүй (энэ нь фонт харагдахгүй байх болно), хоёрдугаарт, хэрэв фонтын файл том бол энэ нь удааширч магадгүй юм. хуудас ачаалж байна.

Форматын дэмжлэг

Файлын формат таарахгүй байгаа асуудлыг хэрхэн шийдвэрлэх вэ? Хамгийн алдартай фонтын форматыг харуулсан хүснэгтийг харцгаая, аль хөтчүүд тэдгээрийг дэмждэг болохыг олж мэдье.

Жич:Та caniuse.com сайтаас үсгийн форматын дэмжлэгийн талаарх хамгийн сүүлийн үеийн мэдээллийг авах боломжтой. Та хайлтын талбарт форматын нэрийг оруулах ёстой (жишээлбэл, ttf).

Хэрэв та орчин үеийн хөтөч рүү чиглэж байгаа бол TTF фонтын форматыг ашиглахад хангалттай байх болно - хамгийн түгээмэл бөгөөд ашигладаг. Хэрэв та ижил фонтын хэд хэдэн форматтай байх шаардлагатай бол тусгай онлайн хөрвүүлэгчийг нэг форматаас нөгөө формат руу шилжүүлж, дараа нь бүх файлыг нэг нэгээр нь холбож болно. Тиймээс хөтөч нь ажиллах үсгийн форматаа сонгох боломжтой болно.

@font-face ашиглан вэб фонт орно

Та MyUniqueFont нэртэй TTF форматтай өөрийн гэсэн өвөрмөц фонттой бөгөөд вэб хуудасныхаа үндсэн текстийг тэр фонтоор харуулахыг хүсч байна гэж бодъё. Хамгийн эхний хийх зүйл бол фонтын файлыг бусад бүх сайтын файлууд байрладаг хавтас руу хуулах явдал юм. Эмх замбараагүй байдал үүсгэхгүйн тулд та үүсгэж болно тусдаа хавтастусгайлан үсгийн маягт, үүнийг нэрлэх, жишээлбэл, фонтууд .

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

Энэ тохиолдолд font-family шинж чанар нь өөр үүрэг гүйцэтгэдэг: үүний тусламжтайгаар бид фонтод нэр өгдөг бөгөөд ингэснээр бид дараа нь хэв маяг бичихдээ энэ нэрийг ашиглах боломжтой болно.

P (фонт-гэр бүл: MyUniqueFont; )

Хоёр дахь мөрөнд үсгийн файл руу орох замыг зааж өгнө. Бидний жишээн дээр MyUniqueFont.ttf файл нь үсгийн фолдерт байрладаг. Таны URL өөр байж болно.

Google фонтууд

Google нь Google Fonts цуглуулгаас дурын фонт оруулахад хялбар болгодог. Өөрийн дуртай фонтыг ашиглаж эхлэхийн тулд Google дээрх үсгийн хуудасны цөөн хэдэн тохиргоог зааж өгөөд, дараа нь энэ фонт руу тусгай холбоосыг хуулж, вэб баримт бичигтээ нэмэхэд л хангалттай.

Жич: Google-ийн бүх фонтуудын цуглуулгыг сайт дээрээс авах боломжтой Google фонтууд. Хуудас дээр та төрөл бүрийн шүүлтүүр ашиглан фонтыг категори, зузаан, цагаан толгойн үсгээр хайх боломжтой.

Доор бид Google-ээс фонт холбох алхам бүрийг тайлбарлах болно. Юуг ойлгохын тулд асуултанд нь, дурын фонтыг сонгоно уу Google хуудасФонтуудыг оруулаад Түргэн ашиглах товчийг дарж нээнэ үү.

Алхам 1: хэв маягийг сонгох

Юуны өмнө сонгосон фонтын хуудсан дээр түүний хэв маягийн сонголтууд, мөн хурд хэмжигч дүрс гарч ирэх бөгөөд энэ нь фонт ачаалах хурдаас өөр зүйл биш юм. Та хэдий чинээ олон үсгийн хэв маяг сонгох тусам ачааллахад удах болно. Тиймээс зөвхөн ашиглахаар төлөвлөж буй хэв маягийг сонгохыг зөвлөж байна.

Алхам 2: цагаан толгойн үсгийг сонгоно уу

Цаашид хуудсан дээр тэмдэгтийн багцыг сонгох боломжтой: латин, кирилл гэх мэт. Үсгийн фонтоос хамааран цагаан толгойн бүх хувилбарууд байхгүй байж болно. Өмнөх догол мөртэй адил зөвхөн танд хэрэгтэй цагаан толгойн урд талд байгаа хайрцгийг шалгах нь дээр.

Алхам 3: сайтад код нэмнэ үү

Эхний арга нь фонтыг татаж авсан HTML кодын Google серверийн холбоосыг нэмэх явдал юм. Та аль хэдийн дууссан кодын хэсгийг хуулж, шошгуудын хооронд байрлуулах хэрэгтэй таны HTML баримт бичигт. Жишээ:

...

Хоёрдахь арга бол @import удирдамжийг ашиглан фонт оруулах явдал юм. Бэлэн кодсонгосон Google фонтын хуудасны 3-р цэгийн хоёр дахь таб дээр байрладаг. Энэ нь таны загварын хуудасны дээд хэсэгт нэмэгдэх ёстой (өөрөөр бол файлыг импортлохгүй). Код нь иймэрхүү харагдаж байна:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Эхний аргын онцлог нь та ашиглахаар төлөвлөж буй хуудас бүрийн толгой хэсэгт үсгийн фонт руу холбоос нэмэх шаардлагатай болно. Энэ нь цөөн тооны хуудастай сайтуудад хэрэгжүүлэхэд хялбар боловч том нөөцийн хувьд асуудалтай байдаг. Хоёрдахь арга нь тохиромжтой, учир нь кодыг гадаад загварын хуудасны хамгийн эхэнд байрлуулж, дараа нь энэ хүснэгтэд холбогдсон бүх хуудас шаардлагатай фонтыг хүлээн авах бөгөөд үүнийг @import зааврыг ашиглан ачаалах болно.

Алхам 4: Загвар

Өмнөх алхмуудыг дуусгасны дараа та фонт хэрэглэж эхлэх боломжтой. Ийм CSS дүрмийг хэрхэн бичсэнийг та аль хэдийн харсан:

P (фонт-гэр бүл: "Roboto", sans-serif; )

Хэрэв та эхний алхамд хэд хэдэн үсгийн сонголтыг сонгосон бол (жишээлбэл, та Bold 700 тод фонт нэмсэн), гурав дахь алхамд код бага зэрэг өөрчлөгдөнө.

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Дараа нь фонтыг тод болгохын тулд CSS загварыг дараах байдлаар бичнэ үү.

P (фонт-гэр бүл: "Roboto", sans-serif; үсгийн жин: 700; )

Жич: Google Fonts-д үсгийн жинг заахдаа зөвхөн 100-аас 900 хүртэлх стандарт нэгжийг ашигладаг.Жишээ нь, хэвийн (өгөгдмөл) нь 400 (хэвийн), стандарт тод нь 700 (том) -той тэнцэнэ.

Гол давуу талууд Google үйлчилгээфонтууд нь:

• ашиглахад хялбар (эхлэгч нь ч гэсэн үйлчилгээтэй харьцах боломжтой бөгөөд шаардлагатай бүх кодыг автоматаар үүсгэдэг - үүнийг хуулбарлахад л үлддэг);
• фонтын бэлэн байдал (тэдгээрийн төлбөр төлөх шаардлагагүй);
• бүх ашигласан фонтын форматыг өгсөн (энэ нь хөтөч бүр яг ажиллаж байгаа фонтын форматаа ачаалах боломжтой гэсэн үг юм).

Үйлчилгээний дутагдалтай талуудын дунд маш олон төрлийн фонт байдаггүй, ялангуяа кирилл үсэг байдаг. Дашрамд хэлэхэд, Интернет дээр бусад ижил төстэй үйлчилгээнүүд байдаг, жишээлбэл, TypeKit (төлбөртэй).

Үр дүн

Өнөөдөр бид анхны болон стандарт бус фонтыг вэб хуудас руу холбох хэд хэдэн сонголттой. Эдгээр аргууд тус бүр өөрийн давуу болон сул талуудтай. Аль сонголтыг ашиглах нь илүү дээр вэ, та өөрөө тодорхойлох хэрэгтэй. Энэ нь ихэвчлэн нөхцөл байдлаас шалтгаалдаг бөгөөд янз бүрийн тохиолдолд өөр өөр арга барил нь ашигтай байж болно. Энэ үед та CSS дээр фонтуудыг хэрхэн ашиглахаа мэдэхэд л хангалттай.

Вэб дизайнеруудад зориулсан фонтын маш сайн эх сурвалж. IN WPBv4алдартай үсгийн хослолыг ашиглаж эхэлсэн Google фонт: чихэвч ОсвальдТэгээд Лора. Зарим хэрэглэгчид Google-ийн фонтыг WordPress-ийн сэдэвт ашиглах боломжтой эсэх, үүнийг хэрхэн хийх талаар асуулт асуусан. Энэ нийтлэлд Google вэб фонтыг хэрхэн нэмэх талаар ярилцах болно WordPress загварууд Зөвтаны сайтын гүйцэтгэлд нөлөөлөхгүйгээр.

Танд таалагдсан Google вэб фонтуудыг хайж олох

Эхлээд та Google-ээс өөрт таалагдсан фонтуудыг олох хэрэгтэй. Номын сангийн санал болгож буй фонтуудаас сонголтуудыг хайж олоорой Google үсгийн номын сан. Тохиромжтой сонголтыг олсны дараа товчлуур дээр дарна уу Түргэн ашиглах:

Энэ товчлуур дээр дарсны дараа та байх болно шинэ хуудас. " гэж нэрлэгддэг маягтыг харах хүртлээ гүйлгэнэ үү. Энэ кодыг вэбсайтдаа нэмнэ үү":

Кодоо хуулж тэмдэглэлийн дэвтэрт буулгана уу, бид үүнийг дараа ашиглах болно. Ихэвчлэн дор хаяж 2 өөр фонт ашигладаг. Жишээлбэл, манай практикт фонт ашигладаг байсан Освальд + Лора. Тиймээс дээр дурдсан процедурыг хоёр дахь фонтоор давтах ёстой.

Таны WordPress сэдэвт Google вэб фонт нэмэх

Google-ээс вэбсайтдаа фонт нэмэх гурван үндсэн арга байдаг. Жишээ нь, импортлох стандарт арга, арга бий @импортболон хамт нэмнэ javascript. Ихэвчлэн эхний хоёр аргын аль нэгийг нь ашигладаг.

Хамгийн хялбар арга бол сэдэвчилсэн файлаа нээх явдал юм style.cssнэмж оруулсан фонттой холбоотой дараах кодыг оруулаад (эхний алхамд бид үүнийг тэмдэглэлийн дэвтэр рүү хуулсан гэдгийг санаарай):

@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);

Үүнийг олон хүн хийдэг StudioPress, Эхлэл). Гэсэн хэдий ч энэ нь нээлттэй фонт нэмэх бүрэн зөв арга биш юм. Аргын хэрэглээ @импортзэрэгцээ татан авалтыг хааж, вэб хөтөч таны вэбсайтын бусад контентыг үргэлжлүүлэн татаж авахаасаа өмнө фонтын файлыг дуустал нь татаж авахад хүргэдэг. Тиймээс, энэ арга нь тохиромжтой мэт боловч тийм биш юм Хамгийн зөв замХэрэв та сайтынхаа хурд, гүйцэтгэлд санаа тавьдаг бол фонттой ажиллах. Та эдгээр дэлгэрэнгүй мэдээллийг уншиж болно Энд.

Өөр өөр Google фонтуудын хүсэлтийг нэгтгэх нь хамгийн сайн арга юм нэг хүсэлтхэт их HTTP хүсэлтээс зайлсхийхийн тулд. Үүнийг хэрхэн хийх талаар эндээс үзнэ үү. Код нэмэх:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Хүчээр ашиглах гэж байгаа ч гэсэн @импорт, ядаж олон хүсэлтийг нэг болгон нэгтгэнэ үү.

Вэбсайтын гүйцэтгэлийг алдагдуулахгүйгээр Google вэб фонтыг хэрхэн нэмэх вэ

Хамгийн сайн нь ашиглах болно стандарт арга, энэ нь файл импортлохоос илүү холбоосыг ашигладаг. Зүгээр л хоёр хаяг авна уу URLэнэ гарын авлагын эхний алхамаас. Хоёр өөр фонтыг хооронд нь тэмдэг нэмж нэгтгэнэ үү | . Дараа нь гарсан кодыг блокт хийнэ толгойтаны сэдэв. Үүнийг хийхийн тулд та файлаа засах хэрэгтэй болно header.php мөн загварын хуудасны кодыг түүнд нэмнэ үү. Та дараахь зүйлийг авах ёстой.

үндсэн зорилгофонтын хүсэлтийг эхний шатанд нэмэх явдал юм. Төслийн блогийн дагуу Google вэб фонтуудфонтын мэдэгдлийн өмнө скрипт таг байгаа бол @фонт нүүр, Дараа нь Internet ExplorerФонтын файл өөрөө ачаалагдах хүртэл хуудсан дээр юу ч үзүүлэхгүй.

Энэ алхмыг дуусгасны дараа та файлд үүссэн кодын хэсэг болон фонтыг ашиглаж болно cssтаны сэдэв. Энэ нь иймэрхүү харагдах болно:

H1 (фонт-гэр бүл: "Освальд", Helvetica, Arial, serif; )

Цөөн хэдэн хүүхдийн сэдэв, хүрээ байдаг. Санал болгогдоогүйүндсэн сэдэв файлуудыг өөрчлөх, ялангуяа та хүрээ ашиглаж байгаа бол; Учир нь таныг фреймворкийн хувилбарыг шинэчлэх бүрт тухайн сэдвийн өөрчлөлтүүд устах болно. Хэрэв та Google-ийн фонтыг хүүхдийн сэдэвт зөв нэмэхийг хүсвэл үндсэн сэдэв эсвэл түүний хүрээн дэх нэмэлтүүд болон шүүлтүүрүүд дээр ажиллах шаардлагатай болно.

Жишээлбэл, хэрэв та хуудсыг харвал цэнхэр хэвлэмэл, баг WPBv4 сэдвийг хүрээнээс захиалгат хүүхдийн сэдэв болгон бүтээсэн Эхлэл. Хүүхдийн сэдэвт Google вэб фонтыг хэрхэн нэмэхийг үзье Эхлэл.

Genesis дээр суурилсан хүүхдийн сэдэвт Google вэб фонтыг хэрхэн нэмэх вэ

Хүүхдийн сэдэв болон түүний файлыг нээнэ үү functions.php мөн энэ файлд дараах кодыг нэмнэ үү.

Add_action("genesis_meta", "wpb_add_google_fonts", 5); функц wpb_add_google_fonts() ( echo " "; }

Хамгийн гол хийх зүйлблок доторх кодыг харах явдал юм genesis_meta. Анхдагч байдлаар, гэх мэт сонголтууд байдаг META- тайлбар, түлхүүр үгс, загварын хуудас, фавикон гэх мэт. Тэргүүлэх чиглэлийг тодорхойлж байна 5 , бид үндсэн загварын хуудсыг ачаалахаас өмнө загварын хуудас ачаалагдсан эсэхийг шалгах болно.

Харамсалтай нь бид одоо байгаа бүх эцэг эх, хүрээг хамарч чадахгүй. Хэрэв танд тодорхой сэдвүүдийн талаар асуулт байвал тухайн сэдвийн хөгжүүлэгчдийн форумын тохирох сэдвүүдээр хөгжүүлэгч болон сэдэв зохиогчдоос асууна уу.

Бидний сүүлчийн зөвлөгөө Google вэб фонтуудөөрийн сайт дээр: ашиглах бодолгүй байгаа фонттойгоо битгий асуулт асуу, эсвэл бүү туршилт хий. Жишээлбэл, хэрэв та зөвхөн энгийн болон тод үсгийн фонтыг хүсэж байгаа бол тухайн фонтын хувьд бусад боломжит хэв маягийг бүү ашигла. Энэхүү нийтлэл нь танд WordPress сайт дээрээ Google вэб фонтуудыг зөв тохируулах, ашиглахад тусална гэж найдаж байна.