C
Cyberia
Guest
[GELÖST] Benötige Hilfe finde Fehler nicht CSS & Webfonts
Ich wollte Webfonts lokal speichern und dann in einer CSS Datei einbinden. Als erstes wollte ich die Überschriften h1 und h2 mit der gewählten Schriftart versehen. Aber irgendwas ist wohl falsch, denn er übernimmt das nicht. Ich weiß ehrlich gesagt auch nicht genau wo die Files liegen müssen und welche Endungen sie haben müssen, weil da sind mehr als nur eine Datei bei der runter geladenen Schriftart dabei.
Könnt ihr mir da vielleicht helfen, mich macht das echt Wahnsinnig, weil ich den Fehler nicht finde!?
GELÖST: Lösung steht am Ende dieses Beitrages
Meine CSS Datei
Die Lösung
So war es falsch, das @font-face hatte ich direkt unter das Element hier z.B. die h1 & h2 geschrieben.
h1, h2
@font-face {
font-family: 'SnigletRegular';
src: url('Sniglet-webfont.eot');
src: url('Sniglet-webfont.eot?iefix') format('eot'),
url('Sniglet-webfont.woff') format('woff'),
url('Sniglet-webfont.ttf') format('truetype'),
url('Sniglet-webfont.svg#webfontz5Sw7deS') format('svg');
font-weight: normal;
font-style: normal;
}
Richtig war es dann so, das @font-face habe ich ganz oben ins Dokument geschrieben, nicht unter das Element, welches ich verändern wollte.
@font-face {
font-family: 'SnigletRegular';
src: url('Sniglet-webfont.eot');
src: url('Sniglet-webfont.eot?iefix') format('eot'),
url('Sniglet-webfont.woff') format('woff'),
url('Sniglet-webfont.ttf') format('truetype'),
url('Sniglet-webfont.svg#webfontz5Sw7deS') format('svg');
font-weight: normal;
font-style: normal;
}
Dann bei dem Element h1 & h2 habe ich folgendes geschrieben um den Font SnigletRegular zu nutzen:
h1, h2
{
font-family: 'SnigletRegular';
}
Und so ging es dann.
Ich wollte Webfonts lokal speichern und dann in einer CSS Datei einbinden. Als erstes wollte ich die Überschriften h1 und h2 mit der gewählten Schriftart versehen. Aber irgendwas ist wohl falsch, denn er übernimmt das nicht. Ich weiß ehrlich gesagt auch nicht genau wo die Files liegen müssen und welche Endungen sie haben müssen, weil da sind mehr als nur eine Datei bei der runter geladenen Schriftart dabei.
Könnt ihr mir da vielleicht helfen, mich macht das echt Wahnsinnig, weil ich den Fehler nicht finde!?
GELÖST: Lösung steht am Ende dieses Beitrages
Meine CSS Datei
Meine HTML Datei* {
padding:0;
margin:0;
}
body
{
font-family: georgia;
font-size: 1em;
font-style: oblique;
color: White;
background-color: #4169E1;
line-height: 1.5em;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
}
h1, h2
@font-face {
font-family: 'SnigletRegular';
src: url('Sniglet-webfont.eot');
src: url('Sniglet-webfont.eot?iefix') format('eot'),
url('Sniglet-webfont.woff') format('woff'),
url('Sniglet-webfont.ttf') format('truetype'),
url('Sniglet-webfont.svg#webfontz5Sw7deS') format('svg');
font-weight: normal;
font-style: normal;
}
h1, h2
{
padding-left: 10px;
margin-top: 20px;
background-color:#6495ED;
line-height: 2em;
margin-bottom: 20px;
}
ul
{
padding-left:30px;
margin-top:20px;
margin-bottom: 20px
}
ol
{
padding-left:30px;
margin-top:20px;
margin-bottom: 20px
}
p
@font-face {
font-family: 'LarchmontCondensedRegular';
src: url('Larchmont_Condensed_OT-webfont.eot');
src: url('Larchmont_Condensed_OT-webfont.eot?iefix') format('eot'),
url('Larchmont_Condensed_OT-webfont.woff') format('woff'),
url('Larchmont_Condensed_OT-webfont.ttf') format('truetype'),
url('Larchmont_Condensed_OT-webfont.svg#webfontsBBHZXeF') format('svg');
font-weight: normal;
font-style: normal;
}
p
{
margin-top:15px;
margin-bottom:15px;
}
code
{
@font-face {
font-family: 'NeuropoliticalRegular';
src: url('neuropolitical_rg-webfont.eot');
src: url('neuropolitical_rg-webfont.eot?iefix') format('eot'),
url('neuropolitical_rg-webfont.woff') format('woff'),
url('neuropolitical_rg-webfont.ttf') format('truetype'),
url('neuropolitical_rg-webfont.svg#webfontC2kThX9x') format('svg');
font-weight: normal;
font-style: normal;
}
}
<!Doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="description" content="übernahme von bestehenden Datenbanken in Drupal" />
<meta name="DC.creator" content="Tobias Hiep" />
<meta name="date" content="2011-03-27" />
<title>Content-Managment-System Drupal</title>
<link rel="stylesheet" href="CSSfont-sindieric.css"/>
</head>
<body>
<h1>Übernahme von bestehenden Datenbanken in Drupal</h1>
<p>Das Content-Management-System <a href=https://drupal.org>Drupal</a> bietet mit das Modul <a href=http://drupal.org/project/cck>CCK</a> die Möglichkeit neue Inhaltstypen mit frei definierbaren Feldern zu erstellen. Was vor allem für neue Inhalte, z.B. für aktuelle Meldungen, eine schnelle und einfache Möglich der Erweiterung ist. Seit Drupal 7 ist das Modul Bestandteil des Kernsystems.</p>
<p>Was aber, wenn aus einem bestehenden PHP/MYSQL-Projekt die Daten in das Drupal-System integriert werden sollen?</p>
<p>Dafür gibts grob drei Möglichkeiten:</p>
<ul>
<li>Erstellen eines neuen Inhaltstyps mit CCK</li>
<li>Schreiben eines Moduls, das einen Inhalttyp definiert</li>
<li>Schreiben eines Moduls, das Zugriff auf die Daten bietet – ohne sie in Drupal komplett integrieren</li>
</ul>
<h2>Inhaltstyp mit CCK erstellen</h2>
<p>Das Erstellen eines neuen Inhaltstyps ist auf den ersten Blick die schnellste und einfachste Methode: Einfach die entsprechenden Felder anlegen und ... </p>
<p><b>Was tun mit den bestehenden Daten?</b><p>
<p>Diese müssen in die neuen Felder eingefügt werden, die alte Tabelle kann nicht weiterverwendet werden. Das kann über ein Script geschehen, das die bestehenden Datensätze einen nach dem anderen ausliest und über drupal-XX jeweils eine neue Node in Drupal anlegt. </p>
<cite>Todd Tomlinson und John K. VanDyk schreiben dazu:</cite>
<p><q>So What Exactly Is a Node?
One of the first questions asked by those new to Drupal development is, “What is a node?” A node is a piece of content. Drupal assigns each piece of content an ID number called a node ID (abbreviated in the code as $nid). Generally each node has a title also, to allow an administrator to view a list of nodes by title.</q></p>
<address>Pro Drupal 7 Development, 3rd Edition</address><br />
<b>Vorteile</b>
<p>Alle Daten sind Bestandteil von Drupal
Es müssen keine Formulare zum Bearbeiten der Daten erstellt werden
Die integrierte Suchfunktion wird automatisch benutzt</p>
<b>Nachteile</b>
<p>Die Daten liegen in einem anderen Format vor. Gerade bei Drupal 7 werden die Daten standardmäßig auf viele einzelne Tabellen verteilt.
Die Integrität der konvertierten Daten muss überprüft werden.
Für eine Migration auf ein weiteres System ist eine neuerliche Konvertierung der Daten nötig.
Es ist keine parallele Bearbeitung mit dem alten und neuen System möglich.</p>
<h2>Modul für einen Inhaltstypen erstellen</h2>
<p>Das ist der Normalfall ohne CCK gewesen – es wird ein Modul erstellt, was eine neuen Inhaltstyp bereitstellt. über verschiedene Hooks () wird er Inhaltstyp definiert und dem Drupal-Nutzer zur Verfügung gestellt. Dabei ist das Modul für die Speicherung der meisten Daten und die Definition der Eingabefelder verantwortlich. Das Forum-Modul in Drupal 7 ist hierfür ein Beispiel. Drupal übernimmt standardmäßig die Speicherung des Titels und eines Textblocks – dies läßt sich allerding umgehen, sodass alle Daten in einer Tabelle zur Verfügung stehen.</p>
<p>Die Tabelle muss dabei um ein neues Feld nid (Node-Id) erweitert werden. Und damit Drupal die Daten auch bearbeiten kann, müssen die Felder mit korrekten Daten gefüllt werden, schließlich darf jede nid nur einmal vorkommen.<p>
<p>Dies kann über ein selbsterstelltes Script geschehen, mit folgendem Ablauf:</p>
<ol><li>Datensatz einlesen</li>
<li>nid über <a href=http://api.drupal.org/api/drupal/includes--form.inc/function/drupal_form_submit/7>drupal_form_submit</a> erzeugen</li>
<li>Nur nid in den Datensatz schrieben</ol>
<p><b>Vorteile</b></p>
<ul><li>Die Daten sind recht gut in Drupal integriert.</li>
<li>Die bestehende Tabelle kann weiterbenutzt werden.</li>
<li>Eine parallele Nutzung ist mit Einschräkungen möglich.</li>
<li>Die Suche in Drupal kann relativ einfach mitgenutzt werden.</li>
<li>Die Integrität der Daten ist einfacher zu gewährleisten.</li></ul>
<p><b>Nachteile</b></p>
<ul><li>Ein Modul muss erstellt werden.</li>
<li>Das Erstellen der Eingabemaske kann mühsam sein.</li>
<li>Es muss ein Script zur korrekten Vergabe von nid und vid geschrieben werden.</li>
<li>Eine parallele Nutzung ist mit Einschräkungen möglich.</li></ul>
<h2>Modul zum Datenzugriff erstellen</h2>
<p>Dieser Weg ist ähnlich dem vorigen, das nötige Modul ist fast identisch. Allerdings wird kein eigener Inhaltstyp definiert, sondern das Modul über das Erstellen von Pfaden bzw. Menüeinträgen in das System eingebunden. Das Modul ist auch hier logischerweise für Speicherung der Daten und das Erzeugen der Eingabefelder zuständig. Die Tabelle wird ohne Veränderung weitergenutzt, es wird keine nid vergeben – was zur Folge hat, das Drupal die Inhalte nicht kennt, nicht durchsuchen kann und auch in der Inhaltsübersicht nicht anzeigt.
Auch das Kommentieren der Inhalte ist nicht oder nur sehr schwer möglich, da das Kommentarmodul von der nid abhängig ist.
Die Suche läßt sich relativ elegant über das Modul <a href=https://drupal.org/project/search_by_page>Search by Page</a> nachrüsten</p>
<p><b>Vorteile</b></p>
<ul><li>Kein Veränderung der bestehenden Tabelle.</li>
<li>Keine Probleme mit der Vergabe der nid.</li>
<li>Eine parallele Nutzung ist recht problemlos möglich.</li>
<li>Die Integrität der Daten ist gut zu gewährleisten.</li></ul>
<p><b>Nachteile</b></p>
<ul><li>Ein Modul muss erstellt werden.</li>
<li>Das Erstellen der Eingabemaske kann mühsam sein.</li>
<li>Keine Kommentarfunktion möglich.</li>
<li>Nutzung der Suche nur über andere Module möglich, z.B. <a href=https://drupal.org/project/search_by_page>Search by Page</a>.</li></ul>
<p><b>Schrittweise Integration</b></p>
<p>Der größte Vorteil dieses Ansatzes ist, das man schrittweise vorgehen kann und immer die Kontrolle über die Daten behält:</p>
<p><b>Anzeigen der Daten</b></p>
<p>Zunächst wird über <a href=http://api.drupal.org/api/drupal/developer--hooks--core.php/function/hook_menu/6>hook_menu</a> eine Funktionen definiert, die die bestehenden Daten anzeigt.<p>
<pre><code>/**
* Implementation of hook_menu().
*/
function mistudienplan_menu() {
$items['studium/plan'] = array(
'title' => t('Studienplan'),
'page callback' => 'mistudienplan_studienplan',
'access arguments' => array('access content'),
'type' => MENU_NORMAL_ITEM,
'menu_name' => 'main-menu'
);
return $items;
}</code></pre>
<p>Im Beispiel wird bei dem Abruf der Seite von 'studium/plan' die Funktion mistudienplan_studienplan aufgerufen.</p>
<p><b>Ändern der Daten</b></p>
<p>Im nächsten Schritt wird die Drupal-Form-Api genutzt um, ein Formular zu erzeugen, mit dem die Daten angezeigt und bearbeitet werden können.</p>
<p><b>Durchsuchen der Daten</b></p>
<p>Um die Daten durchsuchbar zu machen, wird das Modul <a href=https://drupal.org/project/search_by_page>Search by Page</a> genutzt. In einem selbsgeschriebenen Modul (am besten einem zweiten) werden Funktionen definiert, die die bestehenden Inhalte indizierbar machen und für die Anzeige der Suchergebnisse aufbereiten.</p>
<p><b>Einfügen von nid</b></p>
<p>Wenn doch ein tiefere Integration in Drupal gewünscht ist, kann man jetzt immer noch die Tabelle um nid erweitern. Und über ein Script mit den entsprechenden Daten füllen. Dann ist man am Ende beim Ergebniss des zweiten Weges angekommen.</p>
<h2>Und weiter?</h2>
<p>Dieser Text sollte die bestehenden Möglichkeiten aufzeigen. In den nächsten geht es um die praktische Umsetzung.</p>
<ul><li>Modul zur Anzeige</li>
<li>Erweiterung des Moduls zum Ändern der Daten</li>
<li>Nutzung des Moduls Search by Page</li></ul>
</body>
Die Lösung
So war es falsch, das @font-face hatte ich direkt unter das Element hier z.B. die h1 & h2 geschrieben.
h1, h2
@font-face {
font-family: 'SnigletRegular';
src: url('Sniglet-webfont.eot');
src: url('Sniglet-webfont.eot?iefix') format('eot'),
url('Sniglet-webfont.woff') format('woff'),
url('Sniglet-webfont.ttf') format('truetype'),
url('Sniglet-webfont.svg#webfontz5Sw7deS') format('svg');
font-weight: normal;
font-style: normal;
}
Richtig war es dann so, das @font-face habe ich ganz oben ins Dokument geschrieben, nicht unter das Element, welches ich verändern wollte.
@font-face {
font-family: 'SnigletRegular';
src: url('Sniglet-webfont.eot');
src: url('Sniglet-webfont.eot?iefix') format('eot'),
url('Sniglet-webfont.woff') format('woff'),
url('Sniglet-webfont.ttf') format('truetype'),
url('Sniglet-webfont.svg#webfontz5Sw7deS') format('svg');
font-weight: normal;
font-style: normal;
}
Dann bei dem Element h1 & h2 habe ich folgendes geschrieben um den Font SnigletRegular zu nutzen:
h1, h2
{
font-family: 'SnigletRegular';
}
Und so ging es dann.
Zuletzt bearbeitet von einem Moderator: