Εκφράζοντας IT

CSS συμπλήρωσε 10 χρόνια ύπαρξης του τρέχοντος έτους! Εκείνοι που ήταν γύρω για μια στιγμή, κερδίζοντας το ψωμί τους (ή όχι) με χρήση CSS, τότε ίσως να γνωρίζει πώς έχουν πείνα για μια καλή επιλογή των γραμματοσειρών. Ακόμη και με την έλλειψη των γραμματοσειρών σχεδιαστές όπως αυτές στο css Zen Garden έχουν κάνει χρήση των CSS εικόνες φόντου για την αντικατάσταση γραμματοσειρών κατά την άσκηση του κάνει τη δικαιοσύνη για τα σχέδιά τους. Έχουμε επίσης προσπαθήσει Flash / JavaScript ® αμυχές να επιτύχει τους στόχους του σχεδιασμού μας. Με κανένα τρόπο αυτός είναι ένας λανθασμένος τρόπος για να πάρετε τις γραμματοσειρές που επιθυμούμε σε σχέδια ιστοσελίδα μας, αλλά σίγουρα, δεν είναι το πιο επιθυμητό τρόπο. και το πέρασμα των ετών σχεδιαστής ιστοσελίδων, όπως εγώ, έχουν πλήρως στηρίχθηκε σε δέκα ή έτσι γραμματοσειρές για τα σχέδιά τους.

Οι πρόσφατες εξελίξεις στο Web Standards και μορφή της γραμματοσειράς να είναι δυνατόν να καταστήσουν το κείμενο σε μορφή HTML γραμματοσειρές, εκτός από τα ίδια παλιά προεπιλεγμένες γραμματοσειρές. Έρχεται στο "@ fontface" decleration CSS.

@ Fontface provids μια λύση για τη σύνδεση με το πραγματικό αρχείο γραμματοσειράς και να ανακτούν από το web. Χρησιμοποιώντας @ fontface, οι σχεδιαστές μπορούν να χρησιμοποιήσουν τις γραμματοσειρές χωρίς να χρειάζεται να παγώσει το κείμενο ως εικόνες φόντου. Η εφαρμογή είναι πολύ απλή, όπως φαίνεται παρακάτω, αλλά όπως όλα τα καλά πράγματα έχουν ένα CON μέρος σε αυτό, όλοι οι browsers δεν υποστηρίζουν μια ενιαία "γραμματοσειρά". Εάν σκοπεύετε να χρησιμοποιήσετε @ fontface σε site με σταυρό που απαιτούν υποστήριξη του προγράμματος περιήγησης, τότε θα πρέπει να παρέχουν σε διάφορες πηγές font-τύπους του ίδιου.

1. TrueType - Μια μορφή σχεδιαστεί για να φαίνονται καλά στην οθόνη. Συνιστάται ιδιαίτερα για τα Windows browsers (Chrome).
2. OpenType (CFF) - Αυτό το σχήμα είναι το καλύτερο για την εργασία εκτύπωσης και δεν είναι πάντα φαίνονται καλά στα Windows.
3. ΕΟΤ - Θα πρέπει αυτήν τη μορφή, αν θέλετε να στοχεύσετε τον Internet Explorer. IE δεν θα χρησιμοποιήσετε οποιαδήποτε άλλη μορφή. ΕΟΤ για μας θα μπορούσε να θεωρηθεί «Lite», δεδομένου ότι δεν είναι συμπιεσμένο ούτε περιορίζεται σε τομέα.
4. SVG - Αυτό είναι ένα XML μορφή που υποστηρίζεται από ορισμένα προγράμματα περιήγησης όπως το iPhone.
5. WOFF - Αυτό το cross-browser, web-μόνο τη μορφή των γραμματοσειρών είναι ελαφρύ (γραμματοσειρά δεδομένα είναι συμπιεσμένα zip) και μπορούν να καταρτίζονται είτε με TrueType ή PostScript (CFF) περιγράφει. Είναι αυτή τη στιγμή υποστηρίζεται από τον Firefox 3.6 +.

Χρησιμοποιώντας @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular"?
 src: url ("CalligraphyFLF.eot»)?
 src: τοπική αυτοδιοίκηση («CalligraphyFLF»), οι τοπικές («CalligraphyFLF»), url («CalligraphyFLF.woff») μορφή («WOFF»), url («CalligraphyFLF.ttf») μορφή («TrueType»), url ("CalligraphyFLF . svg # CalligraphyFLF ») μορφή (SVG)?
 }
 @ Font-face {
   font-family: "γραμματοσειρά σας"?
   src: url ("γραμματοσειρές / font_filename.eot")?
   src: τοπική αυτοδιοίκηση («Εναλλακτική ονομασία"), τοπική ("Alternatename"),
     url ("γραμματοσειρές / font_filename.woff") μορφή ("WOFF"),
     url ("γραμματοσειρές / font_filename.otf") μορφή ("OpenType"),
     url ("γραμματοσειρές / font_filename.svg # font_filename") μορφή ("SVG")?
   }
 H2 {font-family: "γραμματοσειρά σας", στη Γεωργία, serif?} 

Όπως μπορείτε να δείτε από το παραπάνω παράδειγμα, να περιλαμβάνουν την επιλεγμένη γραμματοσειρά γραμματοσειράς, πρέπει να συνδεθούν με ένα σύνολο fonttypes για την ίδια γραμματοσειρά. Ως εκ τούτου, οι άνθρωποι αναφέρονται σε αυτό ως «κιτ γραμματοσειράς".
Υπάρχουν διαθέσιμα πακέτα γραμματοσειρών που ρητά επιτρέπει τη σύνδεση με την ιδιότητα CSS @ font-face δυνάμει της Άδειας Χρήσης Τελικού Χρήστη (EULA).

Χρήσιμες Πηγές WebFont:

• Γραμματοσειρές για ενσωμάτωση @ font-face σελίδα στο wiki http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Αυτός είναι ένας διάσημος σχεδιαστής γραμματοσειρών που έχει κάνει εκατοντάδες ενδιαφέρουσες γραμματοσειρές TrueType ελεύθερα διαθέσιμα για χρήση στο web. Γραμματοσειρές του είναι κομψό, διακοσμητικά, και παιχνιδιάρικο.
• Dieter Steffmann είναι μια άλλη μεγάλη σχεδιαστής γραμματοσειρών. Έχει, επίσης, έχει κάνει πολλές όμορφες γραμματοσειρές που είναι διαθέσιμες για οποιονδήποτε να το χρησιμοποιήσει.
• Κατάστημα Γραμματοσειρά : προσφέρει γραμματοσειρές που έχουν σχεδιαστεί ειδικά για χρήση ιστοσελίδων. Περισσότερα από 30 από τις πιο επιτυχημένες οικογένειες FontFont είναι τώρα διαθέσιμο ως FontFonts Web. FontShop έχει επίσης ένα λεπτομερές εγχειρίδιο WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Σκίουρος Γραμματοσειρά : Βιτρίνες όλες τις γραμματοσειρές που προσφέρει σκίουρος γραμματοσειράς για χρήση με ενσωμάτωση @ font-face CSS. Σκίουρος γραμματοσειράς προσφέρει μια εντυπωσιακή ποσότητα του τύπου, καθιστά νεκρός απλό να ξεχωρίσω μία, και επιδέξια προσφέρει "πακέτα" - η γραμματοσειρά της επιλογής σας, σε διάφορες μορφές, συσκευασμένα με επίδειξη HTML και CSS που χρησιμοποιεί πολύ ρεύμα @ font-face σύνταξη . Προσφέρουν επίσης έναν τρόπο για να φτιάξετε το δικό @ font-face κιτ σας . Εάν η γραμματοσειρά που θέλετε να χρησιμοποιήσετε έχει αδειοδοτηθεί κατάλληλα (αυτοί που έρχονται με τον υπολογιστή σας δεν είναι απαραίτητα καλά), η γεννήτρια παράγει ΕΟΤ, SVG, και hey! WOFF αρχεία.

Με περιορισμένες δεξιότητες σετ μου με εργαλεία όπως το Photoshop και Illustrator, μπορώ να ομολογήσω με ειλικρίνεια ότι είμαι καλύτερος από ό, τι προγραμματιστής Είμαι ένας σχεδιαστής. Αλλά το ιστορικό μου με πυρήνα (διακομιστή) με την ανάπτυξη Java / PHP / COBOL, υπήρξε μια πολύ θετική επίδραση στην ανάπτυξη των δεξιοτήτων UI μου. Αυτό που εννοώ είναι, ενώ η δημιουργία των σχεδίων μου, δηλαδή κάθε φορά που κάνω το σχεδιασμό, σκέφτομαι πως ο σχεδιασμός μπορεί να μετατραπεί σε καλύτερη HTML-CSS και κάνοντας το HTML-CSS, δίνω μια σκέψη για το backend τεχνολογία και να λογικά ότι ότι η HTML που μπορεί να εφαρμοστεί εύκολα σε XSL βρόχους ή αποσπάσματα PHP κλπ.

Πάνω από χρόνια, έχω ρίξει το κεφάλι για να σχεδιάζει με UI σχεδιαστές που πιθανώς donot έχουν ιδέα τι HTML ή CSS είναι. Όλα αυτά τα χρόνια έχω σκεφτεί ότι θα ζητήσει για πολύ, αν θέλω απλώς περιμένουν ο σχεδιαστής, ο οποίος προσπαθεί να shov "αδύνατο να κώδικα" του σχεδίου κάτω από το λαιμό μου, για να καταλάβετε ακριβώς λίγο τι σχεδιασμός του θα πρέπει να μετατραπούν σε. Αυτό θα βοηθήσει έτσι δεν είναι;

Τότε, ήρθα σε αυτό το μήνυμα σήμερα ... σχεδιαστές ιστοσελίδων που δεν μπορούν κωδικό ... Δόξα σοι ο Θεός! Είμαι απλά ένας από τους πολλούς που αισθάνονται το ίδιο ... Το παραπάνω artitle είναι λίγο πολύ ασθμαίνων .. αλλά αξίζει να το διαβάσει, κάθε λέξη του.

Ευχαριστώ τον Jay Elliot Αποθέματα ... νιώθω ανακουφισμένος!

Εδώ είναι μερικά αποσπάσματα από το άρθρο Elliots .

Πω πω, τι την ημέρα! Ξεκίνησε με ένα μικρό τιτίβισμα και έκλεισε με μια συζήτηση που έμοιαζε να σαρώσει ολόκληρη την κοινότητα του σχεδιασμού ιστοσελίδων. Φαίνεται ότι υπάρχουν κάποιες πολύ ισχυρές απόψεις που πραγματοποιήθηκε για το θέμα του κατά πόσον σχεδιαστές ιστοσελίδων θα πρέπει να είναι σε θέση να κώδικα.
...
Έτσι, πριν φτάσουμε σε αυτό, επιτρέψτε μου να ανακεφαλαιώσουμε γρήγορα αυτό που είπα σήμερα το πρωί στο Twitter:

Ειλικρινά, είμαι σοκαρισμένος ότι το 2010 είμαι ακόμα έρχονται σε «σχεδιαστές ιστοσελίδων» που δεν μπορούν να κωδικοποιήσουν τα δικά τους σχέδια. Καμία δικαιολογία.

... Θα έχουν πάει λίγο πιο συγκεκριμένος στο tweet μου. Μιλούσα για τους σχεδιαστές που δεν έχουν καν την πιο βασική HTML και CSS δεξιότητες για να μετατρέψει μια επίπεδη σχεδίαση σε πραγματικό χώρο. Δεν ανθρώπους που σκόπιμα επιλέγουν να μην κωδικό? Αυτοί που δεν μπορούν. Και είμαι επίσης αναφέρεται μόνο στον κώδικα front-end εδώ? Φυσικά είναι γελοίο να πιστεύουν ότι οι σχεδιαστές θα πρέπει επίσης να είναι εκπληκτικό back-end προγραμματιστές ...

Παίρνουμε «web» σχέδια έστειλε στο Illustrator, 300dpi, αδύνατο να κώδικα, δεν υπάρχει συνοχή / χρηστικότητα.
~ Η Amy Mahon

Είναι αργά, και έχω να τυλίξετε αυτό με κάποιο τρόπο. Ξέρω ότι θα υπάρξουν πολλοί που διαφωνούν μαζί μου, και πρόθεσή μου δεν είναι να προσβάλει ή να αναστατώσει κανέναν που δεν μπορούν κώδικα, αλλά ελπίζω ότι ορισμένα από όσα έχω πει αντανακλά ορισμένα από τα σημεία που έρχονται πάντα όταν μπαίνουμε σε αυτή η συζήτηση.

Στο τέλος της ημέρας, δεν χάνω τον ύπνο που μπορεί να κωδικοποιήσει και ποιος δεν μπορεί. Είμαι ακριβώς πραγματικά έκπληκτοι να διαπιστώσουν τόσοι πολλοί σχεδιαστές που διαθέτουν front-end δεξιότητες, όπως Σκέφτηκα ότι αυτό ήταν ένα πράγμα του παρελθόντος.

Επίσης διαβάστε τα σχόλια, υπήρχαν περίπου 320 παρατηρήσεις, όπως γράφω ... αξίζουν μια ανάγνωση.
Παρακαλούμε διαβάστε Elliots πλήρη θέση εδώ .. σχεδιαστές ιστοσελίδων που δεν μπορούν να κωδικοποιήσουν

Δεδομένου ότι το κουμπί και το κείμενο είναι ενσωματωμένο, ώστε το κείμενο να ευθυγραμμιστεί με το κάτω μέρος του το κουμπί, το κείμενο θα εμφανιστεί το να είναι λίγο κάτω από το κουμπί.
Αν θέλετε αυτά να ευθυγραμμιστούν με την κορυφή, θα πρέπει να τοποθετήσετε το ραδιόφωνο και το κείμενο σε ξεχωριστά δοχεία όπως divs ή ανοίγματα (κατά περίπτωση) και θα φροντίσει για την ευθυγράμμιση. Θα ήταν ευκολότερο να χρησιμοποιούν τα κύτταρα για πολύ πίνακα, του σχεδιασμού σύντομη σας το επιτρέπει.

Αυτό δεν θα φανεί το ίδιο σε κάθε πρόγραμμα, όπως κάθε πρόγραμμα περιήγησης εμφανίζει ελαφρώς διαφορετικά ραδιόφωνα, έτσι υπάρχει πάντα θα είναι τα θέματα μέγεθος δεν έχει σημασία τι θα κάνεις.