Ilmaista sitä

CSS valmistui 10 vuotta olemassaolon tänä vuonna! Ne, jotka ovat olleet jo jonkin aikaa, ansaita leipänsä (tai ei) CSS, niin saatat tietää miten olemme nälkää hyvä valikoima fontteja. Vaikka puute fonttien suunnittelijoiden kaltaisissa CSS Zen Garden on käyttänyt CSS taustakuvia korvata kirjasimet harjoittamisesta tekee joitakin oikeutta niiden mallit. Olemme myös yrittäneet Flash / JavaScript ® hakata saavuttaa suunnittelun tavoitteita. Missään tämä on väärä tapa saada fontit haluamme osaksi Web-malleja, mutta ehdottomasti ei ole halutuin tapa. ja yli vuoden web designer, kuten minä, ovat täysin luottaa kymmenkunta fontit niiden malleja.

Viimeaikainen kehitys web-standardien ja fontin formaatit mahdollistavat tehdä HTML tekstin kirjasimet muuta kuin samaa vanhaa oletus fontteja. Tulee "@ fontface" CSS decleration.

@ Fontface provids ratkaisu linkittää todellista fontin tiedosto ja hakea sitä verkosta. Käyttämällä @ fontface, suunnittelijat voivat käyttää fontteja ilman jäädyttää tekstin taustakuvina. Täytäntöönpano on hyvin suoraviivainen, kuten alla, mutta kaikki hyvät asiat ovat CON osa sitä, kaikki selaimet eivät tue single "fontti". Jos aiot käyttää @ fontface on sivusto vaatii risti selain tukee, niin joudut antamaan lähteitä eri font-tyyppisiä saman.

1. TrueType - formaatti on suunniteltu näyttämään hyvältä ruudulla. Suositellaan erityisesti Windows selaimilla (Chrome).
2. OpenType (CFF) - Tämä formaatti on parempi tulostaa työn ja ​​ei aina näytä hyvältä Windows.
3. EOT - Tarvitset tätä muotoa, jos haluat kohdistaa Internet Explorer. IE ei käytä mihinkään muuhun muotoon. Meidän EOT: n katsottaisiin "Lite", koska ne eivät ole pakattuja eikä domain-rajoitettu.
4. SVG - Tämä on XML-muotoa tukevat jotkut selaimet kuten iPhone.
5. WOFF - Tämä cross-selain, web vain fontin on kevyt (fontti data on zip-pakattu), ja voidaan kääntää joko TrueType-tai PostScript (CFF) linjaa. Se on tällä hetkellä tue Firefox 3.6 +.

Käyttämällä @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: paikallinen ('CalligraphyFLF), paikallinen (' CalligraphyFLF), url ('CalligraphyFLF.woff)-muodossa ("woff), url (' CalligraphyFLF.ttf)-muodossa (TrueType), url ('CalligraphyFLF . svg # CalligraphyFLF)-muodossa (SVG);
 }
 @ Font-face {
   font-family: "Your kirjasin";
   src: url ("fonts / font_filename.eot");
   src: paikallinen ("Alternate name"), paikallinen ("Alternatename"),
     url ("fonts / font_filename.woff") muodossa ("woff"),
     url ("fonts / font_filename.otf") muodossa ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") muodossa ("SVG");
   }
 h2 {font-family: "Your kirjasinlajia", Georgia, serif;} 

Kuten näette yllä esimerkiksi sisällyttää valitun fontin kirjasinlajin, täytyy linkittää joukko fonttypes samaa kirjasintyyppiä. Siksi ihmiset kutsuvat sitä "Font Kit".
On Font Sarjat että nimenomaisesti sallitaan yhdistäminen kanssa CSS @ font-face omaisuutta sille loppukäyttäjän lisenssi (EULA).

Hyödyllisiä WebFont Resurssit:

• Fonttia @ font-face upottamisen wikisivu osoitteessa http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Hän on tunnettu fontin suunnittelija, joka on tehnyt satoja mielenkiintoisia TrueType vapaasti käytettävissä verkossa. Hänen fontit ovat tyylikäs, koristeellinen, ja leikkisä.
• Dieter Steffmann on toinen suuri fontti suunnittelija. Hänkin on tehnyt monia kauniita fonttia kenen tahansa käytettävissä.
• Font kauppa : tarjolla fontit on suunniteltu nimenomaan web-käyttöön. Yli 30 menestyneimmistä FontFont perheet ovat nyt saatavissa Web FontFonts. FontShop on myös yksityiskohtainen WebFont käyttäjän opas http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Orava : Vitriinit kaikki fontit Font Orava tarjoaa käytettäväksi @ font-face CSS upottamisen. Font Orava on vaikuttava määrä tyyppiä, tekee kuolleet helppo valita yksi, ja kätevästi tarjolla "sarjat" - fontilla valinta, eri formaateissa pakattu demo HTML & CSS, joka käyttää hyvin nykyiset @ font-face syntaksia . Ne tarjoavat myös tapa tehdä oman @ font-face sarjat . Jos kirjasintyypin haluat käyttää on lisensoitu asianmukaisesti (ne, jotka tulevat tietokoneen eivät ole välttämättä kunnossa), generaattori tuottaa raskaat, SVG ja hei! WOFF tiedostoja.

Minun rajallinen taito-set työkaluilla, kuten Photoshop ja Illustrator, voin rehellisesti tunnustan, että olen parempi kehittäjä kuin olen suunnittelija. Mutta taustalla ydin (palvelimella) kehitystä Java / PHP / COBOL, on ollut hyvin myönteinen vaikutus minun UI kehittämisosaamista. Tällä tarkoitan sitä, että luodaan oma malleja, eli aina kun teen suunnittelu, ajattelen miten suunnittelua voi parhaiten muuntaa HTML-CSS ja kun tekee HTML-CSS, annan ajatellut backend teknologian ja varmista riittävä varmuus että HTML on helppo osaksi XSL silmukoita tai PHP katkelmia yms.

Yli vuoden, olen heittänyt päänsä ja malleja UI suunnittelijoita, jotka todennäköisesti antaja ole aavistustakaan, mitä HTML-tai CSS. Kaikki nämä vuodet olen ajatellut, että olisin pyytänyt liikaa, jos olen vain odottaa suunnittelija, joka yrittää shov hänen "mahdoton koodi" suunnittelu kurkustani alas, ymmärtää vain vähän mitä hänen suunnittelu muuttuisi osaksi. Se auttaa oikeassa?

Sitten törmäsin tähän tehtävään tänään ... web-suunnittelijat, jotka eivät voi koodia ... Kiitos Herra! Olen vain yksi monista, jotka tuntevat samaa ... Edellä artitle on vähän pitkä hengästynyt .. mutta kannattaa lukea, jokaista sanaa.

Kiitos Elliot Jay Varastot ... Tunnen helpottunut!

Tässä joitakin poimintoja Elliots artikkeli .

Vau, mikä päivä! Se alkoi yksi pieni piipittää ja päättyi keskustelu, joka näytti lakaista koko web-suunnittelijoita. Näyttää siltä, ​​että joitakin erittäin vahvoja mielipiteet aiheesta, onko web-suunnittelijoiden pitäisi pystyä koodia.
...
Joten, ennen kuin pääsemme tähän, haluan nopeasti kertaus mitä sanoin tänä aamuna Twitterissä:

Oikeasti, olen järkyttynyt siitä, että vuonna 2010 olen silti tulossa koko "web-suunnittelijat", jotka eivät voi koodata omia malleja. Ei tekosyitä.

... Minun olisi ollut hieman tarkempi minun visertää. Puhuin suunnittelijoita, joilla ei ole edes kaikkein perus HTML ja CSS osaamista muuttaa litteä muotoilu osaksi varsinaista. Ei ihmisiä, jotka tahallaan halua koodia, jotka eivät osaa. Ja olen myös viitannut vain etupään koodi tähän, tietenkin se on naurettavaa ajatella, että suunnittelijoiden pitäisi myös olla hämmästyttävän back-end-ohjelmoijat ...

Saamme "web" malleja lähetetään Illustratorissa, 300dpi, mahdotonta koodia ei eheys / käytettävyys.
~ Amy Mahon

On myöhä, ja minun täytyy kääriä tähän asti jotenkin. Tiedän, siellä on monia jotka ovat eri mieltä kanssani, ja minun ei ole tarkoitus loukata tai järkyttää ketään, joka voi koodia, mutta toivon, että osa siitä, mitä olen sanonut heijastaa joitakin kohtia, jotka aina keksiä, kun sukeltaa tätä keskustelua.

Lopussa päivän, en menetä yöuniaan, joka voi koodata ja kuka ei. Olen vain todella hämmästynyt niin monet suunnittelijat, joilla ei ole etupään taitoja, koska minusta tuntui menneisyyteen.

Lue myös kommentit, oli noin 320 kommenttia, kun kirjoitan ... se kannattaa lukea.
Lue Elliots koko post täällä .. Web-suunnittelijat, jotka eivät voi koodata

Koska valintanappia ja teksti ovat inline, niin teksti tasataan itsensä pohjaan valintanapin, teksti näyttää olevan hieman alle valintanappi.
Jos haluat nämä yhdenmukaistaa alkuun, sinun täytyy asettaa radion ja teksti erillisiin säiliöihin, kuten divs tai jännevälit (tarvittaessa) ja he hoitavat yhdenmukaistaminen. Olisi helpompaa käyttää taulukon soluihin myös oman suunnittelu lyhyt sallii sen.

Tämä ei näytä samalta jokaisessa selaimessa, koska jokainen selain näyttää radiot hieman eri tavalla, joten siellä tulee aina olemaan kooltaan asioita mitä teet.