Schriftarten

  • Created : Apr, 18, 2016
  • Last Updated: Sep, 5, 2021

Easy Steps

Einfache Schrifteinstellungen
  1. Öffnen Sie Ihr Widget zur Bearbeitung (oder erstellen Sie ein neues)
  2. Gehen Sie im Einstellungsbildschirm zu einem der Abschnitte "Allgemein/Titel/Inhalt", je nachdem, welche Schriftart Sie gestalten möchten
  3. Wählen Sie eine Schriftart aus dem Dropdown-Liste
  4. Geben Sie eine Schriftgröße ein und/oder wählen Sie Schriftfarben
  5. Prüfen Sie im Vorschau, ob Ihr Widget richtig angezeigt wird
  6. Klicken Sie auf die Schaltfläche Speichern & Code abrufen, um Ihre Änderungen zu speichern

Anpassen der Schriftarten in Ihrem FeedWind-Widget

In diesem Tutorial geht es um Schriftarten und Sie erfahren, wie Sie das Styling der Schriftarten, die im FeedWind-RSS-Widget verwendet werden, ändern können. Schnellzugriff:

Wählen Sie eine Schriftfamilie

Sie können eine Schriftfamilie für FeedWind mit mehreren Methoden auswählen:
  1. Der FeedWind-Einstellungsbildschirm
  2. Erstellen eines benutzerdefinierten CSS
  3. Google-Fonts

Option 1. Auswahl von websicheren Schriftarten aus dem Einstellungsbilschirm

Es gibt eine Standardauswahl an websicheren Schriftarten in den Abschnitten Feed Titel und Feed-Inhalt ►Erweiterte Einstellungen des Einstellungsbildschirms.

Nachfolgend finden Sie die von Internet-Browsern unterstützten Standard-Schriftfamilien, die zur Verfügung stehen:

  • Times New Roman
  • Arial/Helvetica/Sans-Serif
  • Courier
  • Trebuchet MS
  • Verdana
  • Geneva

Es gibt viele Browser und nicht alle Schriftarten sind standardmäßig in allen Browsern verfügbar, aber es wird einen Ersatz geben, der einen ähnlichen Stil und ähnliche Proportionen hat. Aus diesem Grund werden “Schriftfamilien” verwendet, damit standardisierte Schriftersetzungen festgelegt werden können. Wählen Sie die Schriftfamilie aus der Liste aus.

Schriftgröße des Feed-Titels

Im Abschnitt Feed-Titel können Sie eine Schriftgröße für den Titel Ihres Hauptwidgets wählen.     

 Schriftart des Feed-Artikel-Titels

Im Abschnitt Feed Inhalt können Sie die Schriftgröße für Ihren Feed-Inhalt wählen, sowohl für die Titel der Feed-Elemente als auch für den Feed-Inhalt.

 

Fettdruck des Feed-Titels

Sie können die fette Formatierung für den Feed-Titel umschalten.  

Fettdruck des Feed-Titels

Sie können die fette Formatierung für den Feed-Inhalt-Titel umschalten.  

Schriftfarbe

Klicken Sie auf den Farbwähler  ●  oder geben Sie den hexadezimalen Farbcode ein, um Schriftfarben für die Feed-Artikel-Titel und den Feed-Inhalt zu wählen.

 

Option 2: Ändern der Schriftart in FeedWind mit CSS

Erstellen Sie zunächst eine benutzerdefinierte CSS-Datei und fügen Sie deren URL zu Ihrem FeedWind-Einstellungsbildschirm hinzu. Fügen Sie @font-face zu der CSS-Datei hinzu, um eine benutzerdefinierte Schriftart in Ihrem Widget zu verwenden. Sie können dann Ihre Schriftdatei in einem der verbreiteten Formate für Schriftarten (TTF, EOT, OTF usw.) hochladen und FeedWind erlauben, diese zu finden und zu verwenden.

Nachfolgend finden Sie ein Beispiel für das CSS, das erforderlich ist, um eine TFF-Schriftart “SuperBoldRegular” in Ihrem Widget zu verwenden.


@font-face {
font-family: "SuperBoldRegular";
src: url("SuperBoldRegular.ttf") format("truetype");
font-weight: normal;
 

Option 3: Verwendung von Google Fonts

google-fonts-rssSie müssen ein benutzerdefiniertes CSS erstellen, um ein RSS-Widget mit Google Fonts zu erstellen.Um eine Vorlage für Ihre benutzerdefinierte CSS-Datei zu erhalten, können Sie das am Ende dieses Artikels angegebene Beispiel kopieren und verwenden. Sie können ein Feed-Widget zum Einbetten in eine Webseite erstellen, das bei Bedarf an das Design der Webseite angepasst wird, oder einfach ein gut aussehendes und beeindruckendes benutzerdefiniertes RSS-Widget erstellen. Die Kombination von Google Fonts und CSS gibt Ihnen alle Möglichkeiten, die Sie benötigen, um ein WIdget mit beliebigem Stil und Design zu erstellen. Suche Sie auf der Google fonts Webseite nach der/den gewünschten Schriftart(en).

Führen Sie die folgenden Schritte aus, um Google Webfonts für ein oder mehrere Ihrer Widgets umzusetzen:

  1. Klicken Sie auf den Namen der gewählten Schriftart
  2. Öffnen Sie die Toolbox in der Symbolleiste am unteren Rand des Bildschirms
  3. Wählen Sie die Registerkarte @IMPORT tab
  4. Kopieren Sie die @import-Codezeile
  5. Fügen Sie diese Codezeile oben in Ihr benutzerdefiniertes FeedWind-CSS ein
google fonts rss widget feedwind rss widget google fonts google fonts rss widget

Sobald Sie Ihr CSS-Einstellung abgeschlossen und das Widget-HTML in eine Webseite platziert haben, wird der Zielbrowser Ihr CSS auschecken, die Schriftart bei Google nachschlagen und in den Stil Ihres Widgets integrieren. Im folgenden Beispiel sehen Sie eine Vorstellung davon, wie das CSS aussehen sollte und das resultierende Widget rechts vom CSS.

Sie können mehrere Webfonts anwenden, indem Sie oben in der benutzerdefinierten CSS zusätzliche ‘@import’-Werte hinzufügen und diese Attribute auf die entsprechenden Widget-Elemente in der CSS anwenden. Im folgenden Beispiel werden mehrere Google Fonts im CSS verwendet.

 

Beispiel Widget mit Google Fonts [Noto Sans]

CSS-Code-Beispiel
Dies ist ein Beispiel für einer benutzerdefinierte CSS-Datei mit dem Google Font “Noto Sans”:  

/* This adds the ability to utilize Google WebFonts in your FeedWind widget */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

/* This is the styling for main feed container - NOTE: the background-color affects the footer background.*/
#fw-container {
 text-align: left;
 padding: 10px;
 font-family: 'Noto Sans', Helvetica, sans-serif;
 border: 1px solid #0E4FAE;
 border-radius: 4px;
 box-sizing: border-box;
 background-color:#4e82d0;
}

/* This is the styling for the header container*/
#header {
 margin: 10px 20px 10px 20px;
 color: #fff;
 font-size: 18px;
 background-color: #888;
 background-image: url("https://glassho.me/fwtest/bannertop.png");
 background-repeat: repeat-x;
}

a.fw-feed-item-url {
 text-decoration: none;
}

.fw-feed-item {
 display:block;
 }

/* This is the styling for the main Feed Title in the header container*/
.fw-feed-title {
 margin: 10px 20px 10px 20px;
 font-weight: bold;
 word-wrap: break-word;
 text-align: center;
 text-shadow: 2px 1px 0px #000080;
 display:block;
}

/* This is the styling for the Feed Title link in the header container*/
.fw-feed-title a:link {
 color: #fef;
 text-decoration: none;
}

/* This is the styling for a "visited" Feed Title link in the header container*/
.fw-feed-title a:visited {
 color: #ddd;
 text-decoration: none;
}

/* This is the styling for a Feed Title link on "mouseover" (also known as "hover") in the header container*/
.fw-feed-title a:hover {
 color: #fff;
 text-decoration: none;
}

/* This is the styling for an "active" Feed Title link in the header container*/
.fw-feed-title a:active {
 color: #fff;
 text-decoration: none;
}

/* This is the styling for the feed body (i.e all Feed Items) container. */
/* WARNING: be careful adding Left or Right Padding as you can lose the scrollbar when the L/R padding is set to more than 8px; the scrollwheel on a mouse still works, however, but the scrollbar can disappear after 8px of padding either side. Use Margins instead add space around the content container.*/


/* This is the styling for the Feed Item content in the body container*/
.fw-feed-item-content-module {
 margin: 10px;
 height: 160px;
 padding: 10px;
 border-bottom: 1px solid #bbceeb;
 box-shadow: 0px 1px 1px #222;
 background-color: #d1e3ff;
}

/* This is the styling for the Feed Item Title in the body container*/
.fw-feed-item-title {
 display:block; 
}

/* This is the styling for an "unvisited/unclicked" Feed Item Title link in the body container*/
.fw-feed-item-title{
 margin: 20px 0 10px 0px!important;
 color: #00aeff;
 text-decoration: none;
 font-size: 16px;
}

/* This is the styling for a "visited/clicked" Feed Item Title link in the body container*/
.fw-feed-item-title:visited{
 color: #39f;
 padding: 20px 0 0 0;
 text-decoration: none;
}

/* This is the styling for a Feed Item Title link on "mouseover" (also known as "hover") in the body container*/
.fw-feed-item-title:hover{
 color: #39c;
 text-decoration: none;
 padding: 20px 0 0 0;
}

/* This is the styling for an active Feed Item Title link in the body container*/
.fw-feed-item-title:active{
 color: #09f;
 text-decoration: none;
 padding: 20px 0 0 0;
}

/* This is the styling affecting a Feed Item Date for a feed item in the body container*/
.fw-feed-item-date {
 display:block;
 margin: 0 20px 0 3px;
 padding: 0 2px 0 3px;
 color: #999;
 font-size: 10px;
 text-align: right;
}

/* This is the styling affecting a Feed Item Description, Thumbnail or Video Player link for a feed item in the body container*/
.fw-feed-item-link {
 margin: 0 0 0 3px;
 padding: 0 2px 0 3px;
 color: red;
 text-decoration:none;
 }
/* This is the styling affecting an "unvisited/unclicked" Feed Item anchor for a feed item in the body container*/
.fw-feed-item-link{
 color: #123456;
 text-decoration: none;
}

/* This is the styling affecting an "unvisited/unclicked" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link{
 color: #666666;
 text-decoration: none;
}

/* This is the styling affecting an "visited/clicked" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link:visited{
 color: #666666;
 text-decoration: none;
}

/* This is the styling for a Feed Item Title Link Anchor on "mouseover" (also known as "hover") for a feed item in the body container*/
.fw-feed-item-link:hover{
 color: #666666;
 text-decoration: none;
}

/* This is the styling affecting an "active" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link:active{
 color: #666666;
 text-decoration: none;
}

/* This is the styling for the Description in a Feed Item (i.e. the text of a Feed Item in Thumbnail mode, or text+images in Full HTML mode)*/
.fw-feed-item-description {
 font-size: 12px;
 text-align: left;
 margin: 10px;
 color: #666;
 font-weight: 300;
 word-wrap: break-word;
 text-decoration:none;
 display:block;
}

/* This is the styling for a Feed Item Thumbnail - Thumbnail size and layout/orientation can be set here. This does not affect a YouTube video thumbnail.*/
.fw-feed-item-image {
 width: 150px;
 height: 120px;
 float: left;
 text-align: left;
 margin: 20px 20px 10px 10px;
}

.fw-feed-item-image-module {
 margin: 20px 20px 20px 20px;
}

/* This styling allows you to create a footer and style it. By default the footer size is set to zero. */
.fw-branding {
 height: 42px;
}
Wenn Sie Hilfe zu CSS, Schriftarten oder andere Unterstützung benötigen, kontaktieren Sie uns bitte.
   
Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now