Γραμματοσειρά δικιά μου στο CSS

Gunix · 14 Ιανουαρίου 2015

Γεια σας.

Θέλω την βοήθεια σας παρακαλώ.

Πως μπορώ να βάλω δικιά μου γραμματοσειρά μέσα στο css?

Εγώ χρησημοποιώ προς στιγμήν αυτό.

#menu a {
    padding: 6px 12px;
    color: #636466;
    font: bold 14px Arial;
    text-decoration: none;
    display:inline-block;
}

#flooter{
    margin: 250px auto 10px;
    text-align:center;
    color: #636466;
    font: bold 14px Arial;
    text-decoration: none;
    display:inline-block;
}

XPHSTOS_ · 14 Ιανουαρίου 2015

Παράδειγματα από Google Fonts. Ομοίως πράττεις και για το δικό σου font.

Τρόπος 1: <link href='http://fonts.googleapis.com/css?family=Open+Sans'rel='stylesheet' type='text/css'>
Φορτώνεις δηλαδή την γραμματοσειρά από ένα εξωτερικό σύνδεσμο, στην προκείμενη από το Google Fonts.
Έπειτα την χρησιμοποιείς κανονικά όπως θα χρησιμοποιούσες και μια άλλη γραμματοσειρά πχ. font-family: 'Open Sans', sans-serif;

Τρόπος 2: @import url(http://fonts.googleapis.com/css?family=Open+Sans);
Στο δικό σου CSS αρχείο στην πρώτη γραμμή συνήθως κάνεις import την γραμματοσειρά είτε είναι από εξωτερικό σύνδεσμο είτε την έχεις τοπικά στον server σου.
Έπειτα την χρησιμοποιείς κανονικά όπως θα χρησιμοποιούσες και μια άλλη γραμματοσειρά πχ. font-family: 'Open Sans', sans-serif;

Τρόπος 3:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Χρησιμοποιώντας Javascript μέσα στο <head>... Προσωπικά δεν το έχω δουλέψει ποτέ έτσι και δεν έχω δει να εφαρμόζουν αυτήν την τεχνική.
Έπειτα την χρησιμοποιείς κανονικά όπως θα χρησιμοποιούσες και μια άλλη γραμματοσειρά πχ. font-family: 'Open Sans', sans-serif;

Συνήθως ο 1ος τρόπος χρησιμοποιείται για γραμματοσειρές όπως αυτές τις google ή από άλλα site που παρέχουν web fonts ενώ ο 2ος τρόπος συνήθως χρησιμοποιείται για γραμματοσειρές οι οποίες φορτώνονται τοπικά δηλαδή υπάρχουν μέσα στον server σου και τις καλείς από εκεί.

Σύνδεση

Γραμματοσειρά δικιά μου στο CSS

Προτεινόμενες αναρτήσεις

Gunix

XPHSTOS_

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση