Flashhilfe.de - Flash Community

@Font Face funktioniert nicht.

 


AntwortenRegistrieren Seite1  

abgemeldeter Benutzer#1
19.06.2011, 21:30

Hallo,
mein Problem:
Ich möchte @font face verwenden. Hab mir die Schrift mit allen drum und dran von Fontsquirrel runtergeladen.

Meine Stylesheetdatei sieht so aus:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/* Style Sheet */






@font-face {
      font-family: 'QuicksandLight';
      src: url('Quicksand_Light-webfont.eot');
      src: url('Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Light-webfont.woff') format('woff'),
           url('Quicksand_Light-webfont.ttf') format('truetype'),
           url('Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

@font-face {
      font-family: 'QuicksandLightOblique';
      src: url('Quicksand_Light_Oblique-webfont.eot');
      src: url('Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Light_Oblique-webfont.woff') format('woff'),
           url('Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
           url('Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

@font-face {
      font-family: 'QuicksandBook';
      src: url('Quicksand_Book-webfont.eot');
      src: url('Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Book-webfont.woff') format('woff'),
           url('Quicksand_Book-webfont.ttf') format('truetype'),
           url('Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

@font-face {
      font-family: 'QuicksandBookOblique';
      src: url('Quicksand_Book_Oblique-webfont.eot');
      src: url('Quicksand_Book_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Book_Oblique-webfont.woff') format('woff'),
           url('Quicksand_Book_Oblique-webfont.ttf') format('truetype'),
           url('Quicksand_Book_Oblique-webfont.svg#QuicksandBookOblique') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

@font-face {
      font-family: 'QuicksandBold';
      src: url('Quicksand_Bold-webfont.eot');
      src: url('Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Bold-webfont.woff') format('woff'),
           url('Quicksand_Bold-webfont.ttf') format('truetype'),
           url('Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

@font-face {
      font-family: 'QuicksandBoldOblique';
      src: url('Quicksand_Bold_Oblique-webfont.eot');
      src: url('Quicksand_Bold_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Bold_Oblique-webfont.woff') format('woff'),
           url('Quicksand_Bold_Oblique-webfont.ttf') format('truetype'),
           url('Quicksand_Bold_Oblique-webfont.svg#QuicksandBoldOblique') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

@font-face {
      font-family: 'QuicksandDash';
      src: url('Quicksand_Dash-webfont.eot');
      src: url('Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
           url('Quicksand_Dash-webfont.woff') format('woff'),
           url('Quicksand_Dash-webfont.ttf') format('truetype'),
           url('Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
      font-weight: normal;
      font-style: normal;
 
}

.Text
{ padding-left:35px;padding-right:25px;margin-top:5px;font-family:QuicksandBook;color:#565656;font-size:16px;line-height:2;text-align:justify;white-space:normal; }


Die "Schriftdatein" liegen im gleichen Ordner/Verzeichniss wie die Stylesheetdatei.

Meine Indexdatei sieht so aus:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> </title>
  <link rel="stylesheet" type="text/css" href="http://www.****.de/Ordner/Ordner2/style.css">
 

</head>

<body>
<div class="seprodu_Textflow">Lalala Test</div>

.
.
.


Woran könnte es liegen, dass es nicht geht ?

LG
Schlagwörter: CSS, Face, Font, html
Werbung
Beiträge: 0
Registriert: Feb 2016


Sleepingbeast#2
Benutzerbild von Sleepingbeast
Beiträge: 579
Wohnort: Halle
Registriert: Apr 2005

19.06.2011, 22:02

Hallo,

du hast zwar in deiner CSS-Datei die Klasse (.Text) erstellt, die deine eigenen Fonts anspricht...aber du verwendest eine andere Klasse (seprodu_Textflow) in der HTML-Datei. Vielleicht liegts schon daran.

Patrick
_________________________________________________________
Um Rekursion wirklich zu verstehen, muss man zuerst Rekursion verstehen.
null != 'null' != 0 != '0'
vindel#3
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

20.06.2011, 10:29

Hallo,

also erstmal reichen dir 2 formate: TTF für alle Browser, EOT für den IE. Am besten ist es, per CSS-Browserweiche einzubinden (was leider nur in HTML geht)
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
@font-face {
   font-family: QuicksandLight;
   src: url(Quicksand_Light-webfont.ttf);
   }
</style>

<!--[if gte IE 5]>
<style>
@font-face {
   font-family: QuicksandLight;
   src: url(Quicksand_Light-webfont.eot);
   }
</style>
<![endif]-->

Somit kannst du alle aktuellen browser zuverlässig bedienen!
Noch als Tipp:
PHP:
1
2
3
4
5
6
@font-face {
    font-family: Georgia;
    local: Georgia,               
    src: url(Georgia.ttf); 
    }

Das Script lädt nur die Schriftart vom Server, wenn diese nicht schon bereits installiert ist - das Spart Seitenladezeit...
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
abgemeldeter Benutzer#4
Themenautor/in

20.06.2011, 13:29

Danke. Das von Vindel geht, wenn ich das so machen wie du das beschreibst.
Aber dann muss ich das ganze ja in meiner HTML Datei haben. Ich hätte das gerne in einer externen CSS Datei. Die ist immer noch so geblieben wie oben.
Den HTML Code habe ich so umgeändert:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> </title>
  <link rel="stylesheet" type="text/css" href="http://www.****.de/Ordner/Ordner2/style.css">


</head>

<body>
<div class="Text">Lalala Test</div>           <<<<<<<<<<Text statt seprodu_Textflow

.
.
.


Aber es geht immer noch nicht.

Liegt das vielleicht daran, dass ich

ActionScript:
1
2
3
4
5
6
7
8
9
@font-face {
        font-family: 'QuicksandDash';
        src: url('Quicksand_Dash-webfont.eot');
        src: url('Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
             url('Quicksand_Dash-webfont.woff') format('woff'),
             url('Quicksand_Dash-webfont.ttf') format('truetype'),
             url('Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
        font-weight: normal;
        font-style: normal;


Das nicht einfach so in die CSS Datei machen darf ?

LG
Werbung
Beiträge: 0
Registriert: Feb 2016


vindel#5
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

20.06.2011, 21:57

Hallo,

das entspicht nicht den Richtlinien von CSS.
Du bist so auf die "toleranz" angewiesen. Versuch sonst mal die Parameter "format" zu entfernen und als erste Schriftart die "ttf" zu setzen.
Ansonsten Teil es in unterschiedliche font-faces auf, sodass immer nur ein src pro Eintrag ist.
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
abgemeldeter Benutzer#6
Themenautor/in

21.06.2011, 17:30

Danke.
Ich habe die Parameter "format" entfernt.
Jetzt geht es.
Das einzige Problem das noch besteht ist, dass die Umlaute wie  ü ä usw. nicht in der Schrift angezeigt werden, sondern in einer anderen.
Wie kann ich diesen Fehler beseitigen ?

LG
abgemeldeter Benutzer#7
Themenautor/in

21.06.2011, 17:43

Danke.
Ich habe die "fromate" Parameter entfernt.
Jetzt geht es.
Leider werden Zeichen wie "ä,ö,ü" nich in der Schrift angezeigt.
Woran liegt das, wie kann ich das beheben.
Unterstützt werden müssten die Zeichen eigentlich.

Liebe Grüße
abgemeldeter Benutzer#8
Themenautor/in

21.06.2011, 17:53

Muss ich das vielleicht noch irgendwo in die "@font-face Klammer" reinschreiben ?
Geändert von seppel.3 am 21.06.11 um 18:17 Uhr
vindel#9
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

21.06.2011, 20:51

Unterstüzt denn die Schriftart Umlaute?? Hört sich so an, als ob keine Umlaute in dem Font integriert sind...
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
abgemeldeter Benutzer#10
Themenautor/in

21.06.2011, 21:47

ja. Danke.

AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  Mediengestalter.info   php-resource.de   phpforum.de   phpwelt.de   Pixelio.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Hier Werben   Impressum
© 1999-2019 Sebastian Wichmann - Flashhilfe.de