{"id":230955,"date":"2022-12-09T12:31:00","date_gmt":"2022-12-09T09:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230955"},"modified":"2022-12-07T12:00:54","modified_gmt":"2022-12-07T09:00:54","slug":"mukautetut-kirjasimet-mukaan-lukien-wordpress-laajennuksiin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/mukautetut-kirjasimet-mukaan-lukien-wordpress-laajennuksiin\/","title":{"rendered":"Mukautetut kirjasimet mukaan lukien WordPress-laajennuksiin"},"content":{"rendered":"\n

Mit\u00e4 enemm\u00e4n ty\u00f6skentelet verkkokehityksen parissa, sit\u00e4 todenn\u00e4k\u00f6isemmin tulet n\u00e4kem\u00e4\u00e4n ihmisi\u00e4, jotka pyyt\u00e4v\u00e4t sinua sis\u00e4llytt\u00e4m\u00e4\u00e4n mukautettuja kirjasimia projektiinsa.<\/p>\n

Joskus t\u00e4m\u00e4 on helppoa. Jos esimerkiksi k\u00e4yt\u00e4t jotain Google Web Font -kirjasinta<\/a><\/strong>, voit helposti kopioida tarvittavan koodin tyylitaulukkoon liitett\u00e4v\u00e4ksi.<\/p>\n

\"Mukautetut<\/a><\/p>\n

Usein koodi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a><\/strong> :<\/p>\n

<link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"> <\/code><\/pre>\n
Ja sitten voit k\u00e4ytt\u00e4\u00e4 sit\u00e4 tyylitaulukossasi n\u00e4in<\/a> :<\/p>\n
font-family: 'Roboto', sans-serif;<\/code><\/pre>\n
Mutta ent\u00e4 jos joku tarjoaa sinulle joukon kirjasimia, joita h\u00e4n haluaa k\u00e4ytt\u00e4\u00e4 projektissaan ja jotka ovat tiedostomuodossa ja joita ei yll\u00e4pidet\u00e4 jonkin tyyppisess\u00e4 sis\u00e4ll\u00f6njakeluverkossa?<\/p>\n
Mukautetut kirjasimet WordPress-laajennuksissa<\/h2>\n
Ensinn\u00e4kin on syyt\u00e4 huomata, ett\u00e4 tiettyjen fonttien k\u00e4ytt\u00e4minen projekteissasi edellytt\u00e4\u00e4, ett\u00e4 ne kuuluvat tietyn lisenssin piiriin. T\u00e4m\u00e4 ei ole viesti, jossa keskustellaan eri lisenssityypeist\u00e4, mutta varmista, ett\u00e4 sinulla on kirjasimen k\u00e4ytt\u00f6oikeudet.<\/p>\n
Toiseksi, huomaa, ett\u00e4 fonteille on erilaisia \u200b\u200bmuotoja. Alla olevassa esimerkiss\u00e4 n\u00e4et, ett\u00e4 k\u00e4yt\u00e4n OpenType-muotoa. T\u00e4m\u00e4n TL;DR-versio on seuraava:<\/p>\n
\n
OpenType-muoto on olemassa olevien TrueType- ja Adobe\u00ae PostScript\u00ae Type 1 -kirjasinmuotojen p\u00e4\u00e4joukko. Se mahdollistaa parannetun monik\u00e4ytt\u00f6isten asiakirjojen siirrett\u00e4vyyden, monipuolisen kielellisen tuen, tehokkaat typografiset ominaisuudet ja yksinkertaistetut kirjasinten hallintavaatimukset.<\/p>\n<\/blockquote>\n
Jos olet kiinnostunut, voit lukea lis\u00e4\u00e4 t\u00e4\u00e4lt\u00e4<\/a><\/strong>.<\/p>\n
Kolmanneksi, kun kyse on n\u00e4iden fonttien, tyylitaulukoiden kanssa ty\u00f6skentelyst\u00e4 ja niiden sis\u00e4llytt\u00e4misest\u00e4 WordPress-laajennukseen, mielest\u00e4ni \u2013 kuten kaiken muunkin kanssa \u2013 asioiden j\u00e4rjest\u00e4minen on t\u00e4rke\u00e4\u00e4.<\/p>\n
Fonttien j\u00e4rjest\u00e4minen laajennuksen sis\u00e4ll\u00e4<\/h3>\n
Varallisuushakemistossa minulla on yleens\u00e4 css-<\/strong> ja js<\/strong> – hakemisto. Joskus t\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 my\u00f6s kuvia<\/strong>, ja t\u00e4ss\u00e4 esimerkiss\u00e4 se sis\u00e4lt\u00e4\u00e4 my\u00f6s fontit<\/strong>.<\/p>\n
\"Mukautetut<\/a><\/p>\n
Kun fontit on sijoitettu oikeaan hakemistoon, on todella helppoa sis\u00e4llytt\u00e4\u00e4 ne tyylitaulukkoon. Ensin m\u00e4\u00e4rittelet ne seuraavasti<\/a><\/strong> :<\/p>\n
@font-face {\n    font-family: GothamLight;\n    src: url(\"..\/fonts\/Gotham-Light.otf\") format(\"opentype\");\n}\n\n@font-face {\n    font-family: ThirstyScriptMedium;\n    src: url(\"..\/fonts\/ThirstyScriptMedium.otf\") format(\"opentype\");\n}<\/code><\/pre>\n
Ja sitten voit k\u00e4ytt\u00e4\u00e4 niit\u00e4 (kunnollisen varaosan kanssa) n\u00e4in<\/a><\/strong> :<\/p>\n
#search_keywords {\n    background: #ffffff;\n    color: #151335;\n    font-family: 'GothamLight', sans-serif;\n}<\/code><\/pre>\n
T\u00e4ydellisyyden vuoksi on syyt\u00e4 huomata, ett\u00e4 yhdist\u00e4t tyylitaulukot kuten muutkin liit\u00e4nn\u00e4iset:<\/a><\/strong><\/p>\n
<?php\n\nadd_action('wp_enqueue_scripts', 'acme_enqueue_styles');\n\/**\n * Registers the stylesheet for the Acme Plugin Styles.\n *\/\nfunction acme_enqueue_styles()\n{\n    wp_enqueue_style(\n        'acme-visuals',\n        plugin_dir_url(dirname(__FILE__)).'assets\/css\/public.css',\n        [],\n        rand(),\n        'screen'\n    );\n}\n<\/code><\/pre>\n
Siin\u00e4 kaikki.<\/p>\n
Yksinkertainen viesti<\/h2>\n
Toki kaikki t\u00e4m\u00e4 on helppo seurata, mutta t\u00e4rkeimm\u00e4t huomion arvoiset seikat ovat:<\/p>\n