Εισαγωγή γραμματοσειράς σε Html κώδικα

Alex-k · 12-08-09

Έχω φτιάξη μια σελίδα html και έχω χρησιμοποιήσει μια γραμματοσειρά που δεν υπάρχει στο web όταν την εμφανίζει ο φυλλομετρητης ενός τρίτου εμφανίζετε με arial υπάρχει κάποιος τρόπος να εισάγω την γραμματοσειρά στο server και όταν ανοίγει ένας τρίτος την σελίδα να την τραβάει από τον server μου :/:

Isiliel · 12-08-09

Ουχ, ξύνεις πληγές τώρα... :/:

Γίνεται αυτό που ζητάς από css με τον ακόλουθο τρόπο:

Για να λειτουργήσει σε Internet Explorer πρέπει να μετατρέψεις τη γραμματοσειρά σου σε .eot
(υπάρχουν σχετικά προγράμματα στο internet)

Code:

@font-face {
    font-family: "Η γραμματοσειρά μου";
    src: url("Η γραμματοσειρά μου.eot");
}

(στο url θα βάλεις την τοποθεσία από την οποία θα διαβάζεται το αρχείο της γραμματοσειράς)

Για τους υπόλοιπους browsers:

Code:

@font-face {
    font-family: "Η γραμματοσειρά μου";
    src: url("Η γραμματοσειρά μου.ttf"); 
}

Έπειτα θα προσθέσεις στο body:

Code:

body {
    font-family:"Η γραμματοσειρά μου", "Trebuchet MS", sans-serif;
}

Για κάποιο λόγο που δεν έχω ανακαλύψει ακόμα, δε δουλεύει πάντα και με όλες τις γραμματοσειρές :/:

Δες και εδώ, μήπως σε βοηθήσει περισσότερο.
Καλή επιτυχία!

Subject to change · 13-08-09

Επίσης έχε υπόψιν ότι με την παραπάνω μέθοδο πιθανόν να υπάρχουν προβλήματα licensing αν η γραμματοσειρά δεν είναι free (δεδομένου ότι ο καθένας μπορεί να την κατεβάσει βλέποντας απλά το url της στο CSS σου). Επίσης, ότι το @font-face rule δεν υποστηρίζεται από Firefox 3 και κάτω και Opera 9.6 και κάτω.

Εκτός από αυτό, υπάρχουν και εργαλεία όπως το Cufon και το sIFR (google them) αν και προσωπικά μου φαίνονται too much και ουδέποτε τα έχω χρησιμοποιήσει. Πολλοί συνάδελφοι τα χρησιμοποιούν τακτικότατα πάντως.

Τέλος, αν τη γραμματοσειρά αυτή τη χρησιμοποιείς σε ελάχιστα σημεία στα οποία το κείμενο είναι απίθανο να θελήσεις να το αλλάξεις, μπορείς να τα κάνεις images και να χρησιμοποιήσεις κάποια μέθοδο image replacement (google it) για να κρύβεις το σχετικό κείμενο όταν εμφανίζεται η εικόνα (το κείμενο δεν το παραλείπουμε, είναι απαραίτητο για λόγους SEO και accessibility!)

gademis · 14-08-09

Εκτός από αυτό, υπάρχουν και εργαλεία όπως το Cufon και το sIFR

Δεν το ηξερα καν οτι υπάρχουν τέτοια πράγματα. Κατι τετοια sites κανουν τους browsers να έχουν multithread support για να πιανουν πολλά cores.
Πόσο συχνή είναι η απαίτηση για συγκεκριμένο font στο site; Είναι πράγματι τόσο απαραίτητο που να δικαιολογεί τη χρήση τέτοιων εργαλείων; Είναι τόσο άσχημα τα standard fonts τελικα; (Αν και ξέρω οτι παρα πολύς κόσμος είναι ευαίσθητος στο τι fonts βαζει / βλεπει και υπάρχουν πολλά dos and don'ts που δεν ξέρουμε οι πολλοί).
Σχετικό xkcd

iJohnnyCash · 14-08-09

Είναι πράγματι τόσο απαραίτητο που να δικαιολογεί τη χρήση τέτοιων εργαλείων;

Αν δεν δόθηκε η δυνατότητα να παίξουν οι designers με κάτι, δεν μπορούμε να κρίνουμε. Ωστόσο γιατί πρέπει να είναι απαραίτητο; Γιατί στους υπολογιστές η ομορφιά που στερείτε άμεσης χρηστικότητας θεωρείτε κάτι το μεμπτό; Μήπως ωστόσο αυτή η ομορφιά έχει κάνει την τεχνολογία πιο ελκυστική στους έξω;

gademis · 14-08-09

Ωστόσο γιατί πρέπει να είναι απαραίτητο; Γιατί στους υπολογιστές η ομορφιά που στερείτε άμεσης χρηστικότητας θεωρείτε κάτι το μεμπτό; Μήπως ωστόσο αυτή η ομορφιά έχει κάνει την τεχνολογία πιο ελκυστική στους έξω;

Η απαντηση που μου ήρθε στο μυαλό ειναι "γιατι κάνεις τη σελίδα πιό βαριά και χάνεις σε συμβατότητα ενώ κάνεις την ίδια δουλειά με τα standard fonts χωρίς να χάσεις λειτουργικότητα." Στεναχωρήθηκα λίγο γιατι αυτή είναι απάντηση production engineer αντί designer. Θέλω να πιστεύω οτι αν δε μιλάγαμε γενικά αλλα έφτιαχνα ενα site δεν θα σκευτόμουν έτσι..

Alex-k · 14-08-09

Δημήτρη αυτό που ρωτάς είναι απατημένο σε κάθε απαίτηση που έχουμε από τα κομπιούτερ
καταρχήν δεν μπλοκάρουμε της ιδέες ειδικά αυτές που μπορούμε και ήμαστε διαθετόιμενοι να υλοποιήσουμε
μια διαφορετική γραμματοσειρά είναι σαν ένα ταξιδάκι στην Σαντορίνη κάτι διαφορετικό αν μπορεί να δημιουργηθεί δεν είναι καθόλου κακό
το μέγεθος που θα σηκώνει μια σελίδα είναι πραγματικά ένα πρόβλημα που πρέπει να σκέφτεσαι πριν κάνεις οποιαδήποτε αλλαγή όπως και το μικρότερο και μεγαλύτερο εύρος που υπάρχει στης διαθετόμενες συνδέσεις που μας δίνουν και πρέπει να υπολογιστούν όλες και όχι ο μέσος όρος για να μην υπάρχουν άτομα που δεν μπορούν να δουν κάτι που ενδιαφερόνται το μέγεθος τον απαιτήσεων όσο ανεβαίνει μπορεί να ανεβαίνουν και οι επεξεργαστές αλλά δεν βγάζει πουθενά
καλά είναι να εξαντληθεί κάθε περιπτώσει καλυτέρευση και προόδου χωρίς κόστος και όταν ίσε έτοιμος να υποστήριξης μια ριζική αλλαγή τότε να την κάνεις
αν και νομίζω ότι τα πράγματα είναι πολύ απλά και μπορούν να αναπτύσσονται πάνω σε συντεταγμένες και αλγόριθμους ώστε να μπορεί να χαίρετε και κάποιος με έναν pentioum 1
η συγκεκριμένη ιδέα είναι πολύ εύκολο να χρησιμοποιηθεί χωρίς κανένα κόστος μεγέθους (ιδέες) μπορεί να δημιουργηθεί αν εντάξουμε την γραμματοσειρά στο φάκελο τον αρχείων τη με κάποια κωδικοποίηση κάτι σαν της παραγωγές του director
μπορούν αυτοί που φτιάχνουν της γραμματοσειράς να της στέλνουν σε μια διεύθυνση τα αρχεία οπότε όταν ανοίγουμε σελιδομετριτή να συνδέετε και να της σηκώνω οπότε εμείς να μπορούσαμε απλά να χρησιμοποιούσαμε όποια θέλουμε χωρίς να έχουμε σκοτούρες
ίσος αν βάζαμε μια καταλήξω στη γραμματοσειράς της σελίδας σαν bitmapδιανυσματικές να μην χρειάζονταν τίποτα από αυτά και να της διαχωριζόταν οπός όταν της είδε πρώτη φορά κουράστηκα ........χαριτωμένος είσαι οβελήξ. :redface:

Subject to change · 14-08-09

Ναι gademis, η τυπογραφία είναι βασικότατο κομμάτι της γραφιστικής, και τα web safe fonts πολύ περιοριστικά. \
Από την άλλη, προσωπικά πιστεύω ότι ο καλός σχεδιαστής πρέπει να μπορεί να δημιουργεί κάτι αξιόλογο δεδομένων των τεχνικών περιορισμών του μέσου. Αυτός που αγνοεί τους τεχνικούς περιορισμούς ουσιαστικά κάνει τέχνη, όχι εφαρμοσμένη τέχνη.

Εισαγωγή γραμματοσειράς σε Html κώδικα

Alex-k

Νεοφερμένος

Isiliel

Επιφανές μέλος

Subject to change

e-steki.gr Founder

gademis

Τιμώμενο Μέλος

iJohnnyCash

e-steki.gr Founder

gademis

Τιμώμενο Μέλος

Alex-k

Νεοφερμένος

Subject to change

e-steki.gr Founder

Χρήστες Βρείτε παρόμοια

Λοιπές Σελίδες