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)

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

bormolino

28.07.2023, 21:05

Ohne Code kann man dazu nur Vermutungen anstellen.

Eventuell ist direkt in der Seite noch eine Font-Angabe welche deine überschriebt.

Außerdem kann es sein, dass deine CSS Datei separat liegt (z.B. im Ordner css) und nicht im Stammverzeichnis. Die Font-URL muss dann relativ zu dieser Datei und nicht zum Stammordner angegeben werden.

Woher ich das weiß:Studium / Ausbildung – B.Sc. Informatik mit FR Software Engineering

Gamer4214

Fragesteller

28.07.2023, 22:22

muss man die fonts bei webseiten immer erst installieren oder sollten die

auch ohne installation angezeigt werden?

bormolino

28.07.2023, 22:37

@Gamer4214

Was meinst du mit installieren?

Niklas

28.07.2023, 23:06

@Gamer4214

muss man die fonts bei webseiten immer erst installieren oder sollten die auch ohne installation angezeigt werden?

Generell stehen nur einige sogenannte Web Safe Fonts zur Verfügung, die ohne weiteres Zutun nutzbar sind.

Um andere Fonts zu verwenden, musst du die nötigen Dateien in deine Website einbinden. Das kannst du entweder machen, indem du einen bei einem CDN gehosteten Font benutzt oder die Font-Dateien auf deinen Webserver lädst und selber im Head-Bereich deines HTML-Markups referenzierst.

Falls du eine Quelle suchst, die dir beide Optionen ermöglicht und dazu noch gratis ist, bitteschön: https://fonts.google.com/

Gamer4214

Fragesteller

28.07.2023, 23:17

@Niklas

muss die schriftart installiert werden, um auf der webseite angezeigt zu werden , wenn ich eine custom font von google verwende?

Niklas

29.07.2023, 11:04

@Gamer4214

Noch mal: du musst nichts installieren. Du brauchst nur die Dateien einbinden und in deinem CSS die Schriftart referenzieren, in folgendem Beispiel für den Font "Roboto":

font-family: 'Roboto', sans-serif;

Wenn du nicht genau verstehst, was ich damit meine, beschäftige dich noch etwas mehr mit HTML.

Gamer4214

Fragesteller

29.07.2023, 11:28

@Niklas

ich habe sie so bereits eingebunden. alles klar. dann müsste es so klappen hm

SpezialAntwort

22.03.2024, 18:23

Als möglichen Aspekt werfe ich noch einmal das Browser-Cache-Problem in die Waagschale. Es könnte sein, dass Dein Browser bei Wiederaufruf den Seiteninhalt lediglich aus dem Cache zieht und nicht neu vom Server.

Hallo,

folgendes:

Ich habe eine Webseite für eine kleine Firma mittels HTML/CSS erstellt. Einen Baukasten habe ich nicht verwendet, da die Webseite ziemlich komplex war und der Inhaber sie lieber nach eigenen Vorstellungen erstellt haben wollte und nicht einfach durch eine Copy/Paste-Vorlage.

Die Webseite ist soweit fertig, nun möchte der Inhaber aber selbst Inhalte einfügen und aktualisieren können. Kann ich meine HTML-Seite nachträglich zum Beispiel mit einem CMS einbinden? Ich habe sie in VS Code erstellt.

Die Idee mit dem CMS kam daher, dass der Inhaber mit dem Code nicht zurechtkommt und ich Angst habe, dass er die ganze Webseite zerstört, falls er den Code falsch ändert.

Gibt es auch noch andere bessere Varianten als CMS?

Danke schonmal.

...zur Frage

In CCS Datei bestehenden Font durch TTF Font ersetzen?

Hallo zusammen.
Ich habe ein Problem. Auf einer Webseite muss ich die Schriftart ändern und weiss absolut nicht wie.

Die Website ist mit HTML und CSS Stylesheet programmiert.

Kann mir jemand helfen und zeigen, wie ich das Stylesheet so abändern kann, dass der TTF Font, der sich im selben Verzeichnis befindet wie die CSS Datei, als Schriftart auf der Webseite verwendet wird anstelle des bestehenden Webfonts.

Die Schriftart heisst: MuseoSans_100: https://www.georgyboy.ch/test/MuseoSans_100.ttf
Link zur CSS Datei:
https://www.georgyboy.ch/test/style.css
Link zur HTML Datei:
https://www.georgyboy.ch/test/index.html

Ganz herzlichen Dank für eure Hilfe.

...zur Frage

HTML & CSS in .exe umwandeln?

Hallo,

ich habe eine ganz einfache Webseite mit HTML und CSS gebaut. Dort gibt es Buttons, die zu unterschiedlichen Webseiten führen. So eine Art Favoriten Liste wie in Browsern.

Diese Webseite möchte ich gerne in eine .exe umwandeln. Dann kann der Anwender über ein Desktop Icon dieses "Programm" öffnen. Wenn man dann auf einen Button klickt öffnet sich ganz normal eine externe Browser Webseite. Habe das schon mit .hta probiert, aber dann werden einige CSS Befehle nicht übernommen und die Buttons funktionieren nicht. Würde auch gerne eine Installation ausführen lassen, so dass man dann danach eine .exe. Datei hat.

Kenne mich nur mit HTML und CSS aus. Alles Andere kann ich nicht.

Danke :)

...zur Frage

Wie versende ich eine selbst programmierte Website per Email?

Ich habe eine Website für ein Thema in der Schule programmiert. Jetzt möchte ich gerne diese Website (eigentlich die Datei) über Email an meinen Lehrer versenden. Leider gibt es jedes mal ein Problem dabei, unzwar wird die geschickte Website nicht so angezeigt, wie sie sollte. Es sieht bisschen so aus, als wäre der ganze CSS Code dadurch gelöscht wurden (man sieht nichts außer normaler Schrift, keine Bilder usw.). Ich habe auch schon probiert sie als Zip-Datei zu schicken, doch auch das hat nichts gebracht. Gibt es dafür eine Lösung? Ich könnte mir auch vorstellen, dass das Versenden über Email der Fehler ist, allerdings weiß ich leider nicht weiter.

Vielen Dank an jeden, der vielleicht eine Lösung hat :)

...zur Frage

Custom Font mit Material Design Lite?

Hey,

ich baue aktuell meine eigene kleine Website und wollte das Framework Material Design Lite benutzten. Ich habe leider ein Problem und zwar wird durch das Framework automatisch die Font auf eine Standard Schriftart geändert obwohl ich vorher eine andere eingestellt hatte. Weiß jemand wie man das beheben kann?

...zur Frage

html und css: Wo finde ich alte html-befehle?

Hallo,

bei der Erstellung von Webinhalten sind mitlerweile das zusammenspiel von html und css unabbindbar. Oder halt en CMS system.

die CSS-Dateien sind soweit ich richtig informiert bin für das Aussehen (Format der Inhalte) zuständig. Die Css-Datei muss in der html-Datei verlinkt werden.

Frage 1:
Mit welchem Befehl wird die Css Datei verlinkt?

Weiter im Kontext...

Um in der html-datei auf die Formatvorlagen in der Css-Datei zurückzugreifen müssen diese in der Css-Datei definiert und mit einem Tag versehen werden.

Frage 2:
Wie definiere ich diese in der Css Datei?
Frage 2.1:
Wie kann ich diese in der Html-Datei nutzen, einfach den definierten Tag einfügen?

Und hier die Frage für unsere Internethelden....

Vor langer langer Zeit als Css noch nicht geboren war, wurde soweit ich weiss nur in html geschrieben/programmiert/erstellt.. wie auch immer.

Damals musste das Format noch komplett eingegeben werden.

Bsp.:

{font-family: Arial, source code pro, sans-serif; font-size: 24px; color: blue;}

Frage 3:
Wie muss ein html Tag aufgebaut sein damit ich diese "Eingabemethode" so verwenden kann?

Frage 4:
Wie werden folgende Befehle in dem in der Frage 3 befragten weise umgesetzt?

Fett
kursiv
unterstrichen
durchgestrichen
hochgestellt
tiefgestellt
Blocksatz

Ich freue mich schon über die vielen Antworten

...zur Frage

Wie kann ich in HTML den Text im Rahmen die Schriftart ändern?

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"> Test Der Absatz </div>

...zur Frage

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zur Frage

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zur Frage

Welche Programmiersprache muss ich verwenden?

Hallo! Ich möchte ein Programm mit HTML, CSS und JS machen, welches ein Formular und eine Datensammlung hat. Sobald das Formular abgegeben wurde, sollen sich die Daten, je nach den im Formular angegeben Daten, ändern.

Ist das nur mit HTML, CSS und JS möglich, bzw welche andere(-n) Programmiersprache(-n) muss ich verwenden? Vorzugsweise soll es nur eine lokale Datei auf meinem Computer sein, die sich ändert.

...zur Frage

CSS: Wie binde ich eine gedownloadete Schriftart ein?

Hey ich kenne nur den Befehl p {font-family: ....}

aber ich habe vergessen, wie man eine am Server liegende Schriftart verwendet - wo gibt man den Pfad zu der Schrift an? Bzw. wie?

Der relative Pfad wäre ../fonts/sans/datei.ttf

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>

...zur Frage

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;
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen