Website Logo zeigt aderen Font an als es eigentlich ist?

Ich habe ein Logo in Photoshop als svg Datei mit dem font „Sofia“ erstellt. Als ich nun das Bild bzw. Logo in meinem HTML Code hinzugefügt habe, sah ich auf der Website das die Schrift Art nicht dieselbe ist, wie auf dem Bild. Wie kann das sein und wie löse ich das Problem?

2 Antworten

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

12.04.2024, 12:11

Hi sembam,

die Schriften die du verwendest für das Logo, müssen auch in die Seite eingebunden werden, damit das Logo mit gleicher Schrift angezeigt werden kann.

Eine bessere Lösung

Es ist besser die Textelemente im Logo als Pfade umzuwandeln. Lege dir am besten eine Kopie an mit und ohne Pfade, damit du später das Logo nachberarbeiten kannst.

Denn Pfade werden beim exportieren 1zu1 übernommen und sind unabhängig von Schriftdateien. Weitere Infos findest du unter: https://kulturbanause.de/blog/svg-grafiken-mit-photoshop-speichern-exportieren/

Meine Empfehlung: Die beste Lösung ist das Logo gleich im vorhinein in Adobe Illustrator zu erstellen, da dass Programm für Vektoren geschaffen wurde. Hier kannst du auch Texte umwandeln. Wenn du also die Möglichkeit hast Adobe Illustrator nutzen würde ich dir empfehlen dies zu bevorzugen.

Adobe Photoshop ist eigentlich ein pixelorientiertes Bildbearbeitungsprogramm, das aber die Möglichkeit bietet auch Vektoren zu erstellen. Leider sind die Einstellungsmöglichkeiten in Photoshop eingeschränkt und es gibt in Adobe Illustrator Komfortfunktionen zum erstellen von Vektoren. Ist ja schließlich ein Programm zu Erstellen von Vektoren.

Wenn du weitere Fragen hast, dann einfach in gf stellen: Ich hoffe das dir die Antworten weiterhelfen und wünsche dir sembam viel Erfolg!

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

VeryBestAnswers

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

12.04.2024, 11:45

Wenn der Schriftzug als Text in die SVG-Datei eingefügt wurde, muss die Schriftart im Browser verfügbar sein, um richtig angezeigt zu werden.

Du solltest den Text also in einen Pfad umwandeln, damit er überall richtig dargestellt wird. Ich bin aber kein Photoshop-Nutzer, weiß also nicht wie das damit geht.

Woher ich das weiß:Studium / Ausbildung – Informatikstudium

Ähnliche Fragen

Website schrift ändert sich nicht?

Font face wurde verwendet.

Ich hatte vorher eine andere Schriftart installiert und ausgewählt in der css datei .

nun zeigt mir die webseite noch immer die alte schrift an, sogar dann, wenn ich die schriftart aus dem ordner entferne oder in der css datei den namen umbenenne. (dann müsste es normalerweise die standard html schrift anzeigen)

...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

text-align:center; funktioniert nicht?

Ich versuche schon seit geraumer Zeit dieses Problem zu lösen, doch ich komme einfach nicht dahinter, vielleicht kann mir hier jemand netterweise bei meinem Problem weiterhelfen.

<!DOCTYPE html>                             
<style>
  body{
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
 #top{
  text-align: center;
 } 
  
 #logo{
    color:rgb(255, 255, 255);
    background-color: crimson;
    display: inline-flex;
    font-size: 32px;
    font-weight: bold;
    padding: 8px;
    margin-top: 16px;
  }
  #logo-name {
font-size: 32px;
font-weight: bold;
margin: 16px;
text-align: center;
  }
</style>
<html>
  <head>
<title> Homepage </title>
  </head>
<body>
  <div id="top"></div>
  <div id="logo">OH</div>
  <div id="logo-name">Homepage</div>
  <div id="main"></div>
  <div id="footer"></div>
</body>
</html>

...zur Frage

Web-Animation und Prozessvisualisierung?

Ich benötige Hilfe für ein Projekt, bei dem Zustände grafisch abgebildet werden sollen, siehe das Bild im Anhang. Es geht darum, dass wenn sich Zustände und Variablen in Javascript ändern, dies grafisch dargestellt werden soll.

Bis jetzt habe ich es so gemacht, dass es für alle möglichen Zustände ein Bild gibt. Das Problem ist, wenn das System expandiert, läuft das immer mehr aus dem Ruder, was die Erstellung der jeweiligen Zustände angeht. Das heißt, für jeden Zustand, muss ich 2^n Bilder erstellen.

Das Bild zeigt eine vereinfachte und minimalistische Darstellung, wie der Prozess abgebildet werden sollte. Dabei sollten dann, je nach Zustand, die jeweiligen Aktoren dargestellt werden.

Meine Frage ist, ob es einfachere oder elegantere Möglichkeiten gibt, dieses Prozessabbild für HTML mittels JS oder CSS zu animieren?

An SVG hatte ich auch schon gedacht, damit wird es aber noch viel komplizierter, wenn man damit noch nicht so viel Erfahrung hat.

...zur Frage

Bild wird nicht im Browser angezeigt?

Hallo,

ich bin gerade dabei eine Website zu schreiben mit HTML und CSS und gerade scheitere ich daran mein Logo richtig zu verlinken. Ich hab es genauso wie bei meiner anderen Website gemacht wo es funktioniert aber hier nicht. Weiß jemand vllt weiter? Dankeschön schonmal. :)

HTML:

CSS:

ORNDER:

Mein HTML und CSS Code befindet sich im TEST 2 Ordner also so eigentlich:

TEST 2/BILDER/LOGO.eps

So sieht es bis jetzt aus:

...zur Frage

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zur Frage

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zur Frage

mit klasse von bild in HTML CSS einbinden?

Moin ich habe folgendes Problem:

Ich bin daran eine Webseite für meine Bewerbung zu schreiben, und ich habe dementsprechend ein Bild von mir mit rein gepackt.

jetzt wollte ich eine Klasse im <img src="blablabla" alt=" "> definieren.

ich weiss nicht wieso aber im CSS Stylesheet erkennt es die Klasse dann nicht, jedenfalls wird auf der Website nichts verändert.

Hier noch die Fotos von meinem Code:

CSS

HTML

Habe ich irgend etwas falsch gemacht oder kann mir sonst jemand helfen?

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Photoshop: Font fetter machen?

Ich bin zurzeit dabei ein Schrift logo zu erstellen, was bisher gut läuft. Allerdings ist ein Text im speziellen Font etwas dürre im Gegensatz zu den anderen. Wie kann ich diesen Font etwas intensiver (fetter) machen?

...zur Frage

HTML/CSS Steam Website rebuild?

Hallo,

ich möchte gerne die aktuelle Webseite von Steam nachbauen, jedoch habe ich Schwierigkeiten mit dem Hintergrund der Seite. Obwohl die Pixel-Art am Anfang vorhanden ist, fehlt mir der untere Teil der Seite, insbesondere die Darstellung der Steine und Fische. Es wäre am besten, wenn ihr selbst auf die Seite geht, um mich besser zu verstehen.

Ich benötige das zweite Bild von der Seite, das als Hintergrund verwendet wird. Ich habe bereits versucht, es über den Source Code zu finden, war aber leider nicht erfolgreich. Ich zeige euch ein Bild, das ich bereits habe, und benötige lediglich den unteren Teil davon, den ihr auf der Steam-Seite sehen könnt. Dort werden Fische und Steine abgebildet.

Vielen Dank für eure Unterstützung!

...zur Frage

Wie nennt man eine art "zwischen website"?

Hallo zusammen,

ich beschäftige mich zur Zeit etwas mit html. Ich wollte mal versuchen eine Website (keine hochgeladene) zu erstellen wo man PC konfigurationen sehen könne. Ich habe mir vorgestellt, es so ähnlich zu machen wie viele andere webseiten (zB. Systemtreff) zu machen, also ein bild hochzuladen, wo man drauf klicken kann und dann zu einer anderen Seite zu gelangen wo dann alles über den PC steht. Meine Frage wäre also, wie man diese "zwischen webseiten" nennt (ich meine bei dem Link mit dem /... beispielsweise: www.gutefragen.net/frage_hinzufuegen). Es wäre außerdem hilfreich zu wissen, wie man sowas in html erstellt ohne eine öffentliche website zu haben.

...zur Frage

Footer Zeilenumbruch?

Wieso kann ich da keine Zeilenumbrüche reintun? Ich glaube das liegt im footer{} aber ich habe keine Ahnung was dort das blockiert. Kann mir jemand helfen? Code:

<html>

<head>

<style>

body{

width: 100%;

height: 100vh;

}

margin: 0;

padding: 0;

font-family: 'Comfortaa';

}

footer{

padding: 3px;

background-color: lightgray;

color: white;

display: flex;

margin-bottom: 0vh;

position: relative;

padding: 30px;

}

footer a, p{

color: black;

text-decoration: none;

}

</style>

</head>

<body>

<h1>Willkommen beim Geissli-Shop!</h1>

<p>Website by

<a href="#">Elifox</a><br></p>

<p>2023

<a href="#">Geissli Gang</a><br></p>

<p>

<a href="Datenschutzerklaerung.html">Datenschutzerklaerung</a><br></p>

<a href="Nutzungsbedienungen.html">Nutzungsbedienungen</a>

</footer>

</body>

</html>

Danke schon im vorraus!

...zur Frage

SVG Datei von 1MB auf 250kb?

Hey ho Leute,

ich will für meine Website das Logo mit .svg einfügen. Es unterstützt aber nur 250KB und nicht 1MB. Wie kann ich die Dateigröße auf 250KB verkleinern?

LG Kai

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen