Το Google μπαίνει στο παιχνίδι των γραμματοσειρών διαδικτύου

28 Μαΐ 2010 | Γενικά

Δεν επιτρέπονται τα σχόλια.


v

Σήμερα έκανα μια βόλτα στο περιοδικό Smashing Magazine όταν παρατήρησα κάτι περίεργο στην μπάρα κατάστασης του περιηγητή μου. Καθώς έβλεπα τα ονόματα των συνδέσμων που άνοιγαν στον περιηγητή μου κατά το φόρτωμα της σελίδας, το μάτι μου έμεινε για λίγο στο σύνδεσμο fonts.googleapis.com ! Το συγκεκριμένο έτοιμα αφορούσε μια γραμματοσειρά που αποκαλείτε “Droid Sans” σε κανονική και σε bold μορφή.

<link href='//fonts.googleapis.com/css?family=Droid Sans:regular,bold' rel='Stylesheet' type='text/css'/ >

Στη συνέχεια έψαξα λίγο περισσότερο και άνοιξα να δω το περιεχόμενο του CSS και είδα τον ακόλουθο κώδικα :

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g')
       format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw')
       format('truetype');
}

Από τα παραπάνω είναι εύκολο να διαπιστώσουμε πως η Google μπαίνει στη αγορά της διάθεσης online γραμματοσειρών μαζί με άλλες εταιρείες, όπως για παράδειγμα την TypeKit και την Fonts.com. Μπορείτε προφανώς να υποθέσετε πως αυτά είναι άσχημα νέα για αυτές τις εταιρείες, γιατί κατά πάσα πιθανότητα η Google θα διανέμει τις γραμματοσειρές της δωρεάν.

Ωστόσο αυτή η κίνηση της Google δεν έγινε για να κυριαρχήσει στην αγορά γραμματοσειρών, αλλά για συνεργασία. Η Google έχει συνεργαστεί με την TypeKit για να δημιουργήσει το WebFont Loader – μία API γραμμένη σε JavaScript που επιταχύνει το φόρτωμα των χαρακτήρων. Η Google έχει δημοσιεύσει επίσης και ένα παράδειγμα για το πως να χρησιμοποιήσετε την νέα API

<html>
  <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



4 Ιουνίου 2010

Thanks for the writeup (and sorry for only commenting in English). We have Greek ranges in a number of our font families, and hope to be turning on additional subsets in the coming weeks.


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php