2017-12-01 13 views
0

Ich versuche Source Sans Pro Schrift auf meiner Website auf Geräten, die nicht über die Schriftart selbst verfügen. Ich hatte dieses Problem in der Vergangenheit, bin aber nie wirklich auf den Grund gegangen.Meine Schriftart funktioniert nicht auf allen Geräten

Dies ist meine Website (Disclaimer: Ich bin nicht der Designer): http://www.nickysfolders.com/?SessionThemeID=34#

Ich habe ... 1. Legen Sie die font-face auf dem Sheet, wo ich die Schrift

@font-face 
{ 
font-family: 'Source Sans Pro', Comic Sans MS; 
src: url('SourceSansPro-Regular.ttf'); 
} 
nennen
  1. nannte die Schrift

    .footer-text{ 
    font-family: 'Source Sans Pro'; 
    color: #636466; 
    font-size: 14px; 
    font-weight: 400; 
    } 
    
  2. und ich habe und setzen alle Schrift ttf-Dateien auf dem Server in einem Ort, wo die font-face auf sie zugreifen kann, befindet sich direkt im gleichen css Ordner

ich erwartet, dass dies funktionieren würde, auf alle Computer Ich habe es getestet, aber es tut es nicht. Stattdessen fällt es in Zeiten wie Roman oder Sans Serif? Deshalb habe ich die Fallback-Comic-Sans gemacht, damit ich weiß, ob sie überhaupt auf sie zugreift. Anscheinend ist es nicht?

Vielen Dank für Ihre Zeit. Bitte lassen Sie mich wissen, wenn ich andere Details zur Verfügung stellen sollte.

+1

'src:' sucht nach einer Datei relativ zur CSS-Datei. Versuchen Sie es stattdessen mit einer absoluten ('http: // ...') URL, oder einer, die relativ zum '/' root-Verzeichnis ist. Außerdem: 'Comic Sans MS' sollte in Anführungszeichen gesetzt werden. – Blazemonger

+0

Lesen Sie [diese MDN-Seite] (https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face) dann versuchen Sie es erneut – cowCrazy

Antwort

0

Alternativ können Sie das <link> Tag in HTML mit importieren ...

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 

oder diese CSS Import ...

<style> 
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); 
</style> 

Sie können anpassen, welche Varianten Sie verwenden möchten zu weit über Google Fonts.

Sobald Sie die Schriftart-Datei von Google oder Ihrem eigenen Server verknüpft oder eingebettet haben, sollte font-family: 'Source Sans Pro', sans-serif; gut funktionieren.

+0

Hey Mann danke, aber ich sollte es mit beiden tun können Weg ... um klar zu sein, dass ich es verlinkt habe, wie du es vorschlägst, aber die Art, wie ich oben spezifiziere, ist am sichersten/kompatibel. Ich suchte nach jemandem, der mir sagte, was ich oben falsch gemacht hatte. Vielleicht ein dummer Fehler. Oder vielleicht ein Schritt, den ich übersehen habe. – imnickvaughn

+0

Fair genug. Ich bin nicht sehr vertraut mit der Methode, die du gepostet hast, also kann ich leider nicht mit dem reden, was falsch ist. Ich habe nur die Methoden verwendet, die ich beschrieben habe, und hatte keine Probleme. Viel Glück für Sie in Ihrem Projekt. – MarkPraschan

+0

Die Computer, die ich testen muss, sind uralt und in einem traurigen Zustand bin ich nicht überrascht. Einer von ihnen ist ein Windows-Rechner mit einer Mac-Tastatur – imnickvaughn

Verwandte Themen