Warum funktioniert mein @font face nicht?

Ich steh auf dem Schlau, erkennt einer das Problem?

Mein Fontface css:

@font-face {
    font-family:"Conduit-Medium";
    src: url('fonts/Conduit-Medium.eot');
    src: url('fonts/Conduit-Medium.otf') format('opentype');
    font-style: normal;
}

Mein css Kopf:

body {
    background-repeat: no-repeat;
    background-color: #009ee3;
    font-family: "Conduit-Medium", serif;
}

4 Antworten

Erri2001

03.02.2017, 19:33

Versuch doch mal bei der URL

'..fonts/Conduit-Medium.eot'

CSS versucht sonst z.B im Ordner css den Ordner fonts zu finden. mit '..' wird ein Verzeichnis davor gesucht.

abbrechen

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

03.02.2017, 19:30

Wenn ich es richtig erkenne, liegt es an deiner Syntax. Die "Punkt-Komma"-Zeichen sind falsch gesetzt.
Versuche es hier mit: http://stackoverflow.com/a/4872624

magicdrummer

03.02.2017, 10:23

wie sieht denn dein HTML gerüst aus ? mit nur nem doctype kann man da nich viel anfangen.

rednblack

03.02.2017, 10:19

Was klappt denn nicht?

Conduit ist kein Font, der nun wirklich auf allen Systemen installiert ist, willst du da nicht wenigstens eine gebräuchlichere Alternativschrift angeben?

Senselles

Fragesteller

03.02.2017, 10:22

Also die Schrift ist vorgegeben.
Gibt es Alternativen auch wenn sie nicht schön aussehen einen Font einzubinden?

abbrechen

03.02.2017, 19:33

Warum sollte seine Schrift denn auf einem System installiert sein müssen? Er benutzt font-face, damit die User die Schrift sehen können. Font-Face bestimmt nicht einfach irgendeine Schriftart, wie du es vielleicht irrtümlich an dem "font-family" gelesen hast, sondern lädt eine Schrift in dein System, sie der Benutzer zusammen mit den anderen Dateien lädt, sobald er die Seite öffnet. Mit dem font-family setzt man den Namen der ins css geladenen Schrift fest, so dass man sie später unter diesem Namen in Text-Tags einsetzen kann.

Senselles

Fragesteller

09.02.2017, 10:27

@abbrechen

Danke aber ich bin kein "er" :D
Hat sich erledigt, hab im HTML das font face nicht richtig verlinkt.

Hallo,

ich möchte in html von dem Text der im Rahmen ist, die Schriftart ändern.

Irgendwie klappt das nicht so.

@font-face {

font-family: "Germanica";

src: url("Schrift/germanica/Shadowed Germanica.ttf");

}

#id1 { margin-left: 170px;}

<div id="id1"><div align="center"><p style="font-family:Germanica"><p class="outset"><br><font size="7"><strong>Test </font></strong><br><br> <font size="5"><strong> Der Absatz </font></strong> <br><br></p></div>

...zur Frage

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zur Frage

CSS: Wie Gitarren-Akkorde platzsparend in den Text einfügen?

Ich erstelle HTML-Dokumente mit Liedtexten zum Ausdrucken. Die Texte sind so groß wie möglich. Also viele Strophen, umso kleiner der Text.

Nun möchte ich Akkord-Angaben hinzufügen. Die führen dazu, dass die Zeilenhöhe enorm anschwillt und der Text nicht mehr auf A4 passt:

Welches CSS stellt die Akkorde höher, aber behält die Zeilenhöhe? Hier habe ich experimentiert:

akk_c::before {
  color:          red;
  background:     #eee;
  vertical-align: super;
  font-family:    arial, sans-serif;
  font-size:      80%;
}
akk_c::before   { content: "C"; }

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

Bild mit GIF im Hintergrund?

Hallo,

ich bekomme es hin, eine einfache Schrift, mit einem GIF zu hinterlegen.

HTML:

<a href="Startseite.html">
  <h1 class="Blackseries">Blackseries</h1>
</a>

CSS:

.Blackseries {
  color: transparent;
  background-image: urlhttps://media.giphy.com/media/cM2jGL4t1azcHV83Ba/giphy.gif);
  background-position: center;
  -webkit-background-clip: text;
  font-size: 50px;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}

Allerdings würde ich jetzt gerne ein Bild benutzen, welches transparente Stellen hat. Diese transparenten Stellen sollen dann durch das GIF ausgefüllt werden.

Ich habe auch schon im WWW geschaut, trotzdem habe ich bisher noch nichts gefunden. Vielleicht habe ich auch falsch gesucht?

Hat jemand einen Code bzw. eine Seite, wo beschrieben wird, wie man so etwas machen könnte?

LG UpdateD

...zur Frage

font-family, font-style Unterschied?

Was ist bei CSS der Unterschied zwischen einer "font-family" und "font-style"?

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zur Frage

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zur Frage

Wechselndes Hintergrundbild in HTML?

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Wäre nett wenn mir da jemand helfen könnte :)

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zur Frage

CSS-Hintergrund fixed auf Mobilgeräten?

Hallo zusammen,

auf meiner Website habe ich ein Hintergrund eingebunden, welches mit background-attachment:fixed; beim Scrollen fixiert ist. Auf Mobilgeräten wird das aber anscheinend nicht erkannt, sodass das Bild dort verzerrt ist.

Im Internet konnte ich bis jetzt nichts finden, außer, dass es nicht erkannt wird. Einen guten Lösungsvorschlag konnte ich nicht finden. Deshalb hoffe ich, dass ihr mir helfen könnt. Vielen Dank schonmal für alle Antworten!

Hier noch ein Ausschnitt aus meinem Code:

body {
  background-image: url("../../img/Tardan99x.jpg");
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

...zur Frage

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen