selfhtml-wiki: Google-Fonts
0 
Matthias Apsel
0 0 0 Matthias Apsel
0 
dedlfix
0
selfhtml-wiki: Google-Fonts
Gunnar BittersmannHallo. 😀
Ja, ich nerve mal wieder. Vllt. kennt mich ja hier noch wer. 😉 Habe nur mal eine kurze Frage: kann man externe Schriftarten einbinden, ohne auf den head-Bereich der HTML-Seite oder einer CSS-Datei zugreifen zu können? Also einfach irgendwo im body-Bereich? Oder kann man zu Not CSS-Dateien im Body-Bereich einbinden?
Grüße, Die IP da halt
-
Hallo Die IP da halt,
Oder kann man zu Not CSS-Dateien im Body-Bereich einbinden?
Zur Not. Eigentlich ist davon aber abzuraten.
Bis demnächst
Matthias--
Rosen sind rot.-
Hallo Matthias,
Oder kann man zu Not CSS-Dateien im Body-Bereich einbinden?
Zur Not. Eigentlich ist davon aber abzuraten.
Das ist durchaus umstritten. Es gibt Leute, die Stylesheets aus Performance-Gründen am Ende des
bodyeinbinden.Ich persönlich halte das aber auch für den falschen Weg…
LG,
CK-
@@Christian Kruse
Es gibt Leute, die Stylesheets aus Performance-Gründen am Ende des
bodyeinbinden.Oder auch mittendrin. Jake Archibald ist so ein Leut.
☞ Posting von yours truly ☞ The future of loading CSS
Ich persönlich halte das aber auch für den falschen Weg…
Warum?
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar,
Es gibt Leute, die Stylesheets aus Performance-Gründen am Ende des
bodyeinbinden.Oder auch mittendrin. Jake Archibald ist so ein Leut.
Ja, an den dachte ich auch.
Ich persönlich halte das aber auch für den falschen Weg…
Warum?
Weil ich das für einen Hack halte. Ich hätte lieber sowas wie
deferoderasyncfür CSS-Resourcen.LG,
CK
-
-
-
[> Hallo Die IP da halt,
Oder kann man zu Not CSS-Dateien im Body-Bereich einbinden?
Zur Not. Eigentlich ist davon aber abzuraten.
Bis demnächst
MatthiasHallo Matthias,
Habe ich gerade getestet, schon allein style scoped scheint nicht zu funktionieren, wie die Seite hier zeigt.
Grüße, Die IP da halt
-
-
Hallo,
mir fallen da einige mögliche Lösungen ein. Daher wäre es interessant zu wissen, was genau und warum Du das erreichen willst.
Auf Anhieb würde ich sagen per Javascript/DOM-Umbau Teile des Head-Bereichs austauschen? Sofern Du darauf aber nicht zugreifen kannst, Inhalte per Iframe einbinden?
Gruss Henry
-
Hallo Henry,
Es geht um eine Seite in einem Wiki-Projekt (basierend auf MediaWiki). Ich kann nur den Hauptteil der Seite bearbeiten, unterstützt wird CSS, wohl auch JavaScript (zumindest in Teilen, wovon ich aber keine Ahnung habe) und HTML in Teilen. Ich glaube, Iframes sind nicht möglich, allerdings meines Wissens CSS im unbegrenzten Rahmen. Die Schriftart muss ich einbinden, weil sie einen ganz speziellen Effekt ausstrahlen muss.
Grüße, Die IP da halt
-
Hallo Die IP da halt,
Es geht um eine Seite in einem Wiki-Projekt (basierend auf MediaWiki).
Wenn es tatsächlich ein Mediawiki ist, kannst du die Seite
https://example.com/wiki/MediaWiki:Common.css
erstellen und bearbeiten.Dort kannst zum Beispiel die Zeile
@import url('https://fonts.googleapis.com/css?family=Roboto');einfügen.
Diese Datei wird in den head einer jeden Wiki-Seite eingebunden.
Bis demnächst
Matthias--
Rosen sind rot.-
Tach!
Es geht um eine Seite in einem Wiki-Projekt (basierend auf MediaWiki).
Wenn es tatsächlich ein Mediawiki ist, kannst du die Seite
https://example.com/wiki/MediaWiki:Common.css
erstellen und bearbeiten.Dort kannst zum Beispiel die Zeile
@import url('https://fonts.googleapis.com/css?family=Roboto');einfügen.
Diese Anweisung muss als erste in einem Stylesheet stehen (abgesehen von @charset). Mediawiki hat einen Resource Loader, der die Ressourcen zu einem Paket zusammenfasst. Somit ist nicht garantiert, dass die @import-Anweisung als erste zu stehen kommt.
Ich bin mir grad nicht sicher, ob ein <style>-Bereich als Stylesheet zählt. Ein kurzer Test mit Chrome zeigt, dass das geht, und auch dass das kaputtgeht, wenn man vor das @import andere Regeln schreibt.
Jedenfalls kann man als Anwender auch keine Style-Bereiche in ein Mediawiki einfügen. Dazu braucht es sowas wie die Widgets-Extension, die der Betreiber des Wikis bereitstellen muss. Widgets müssen als Administrator bearbeitet werden, weil man da alles mögliche reinschreiben kann. Widgets müssen aber auch in jede Seite einzeln eingebunden werden, wenn sie darin wirksam sein sollen. Das wird am Ende wohl auf ein Gespräch mit dem Betreiber hinauslaufen.
dedlfix.
-
Hallo Die IP da halt,
Es geht um eine Seite in einem Wiki-Projekt (basierend auf MediaWiki).
Wenn es tatsächlich ein Mediawiki ist, kannst du die Seite
https://example.com/wiki/MediaWiki:Common.css
erstellen und bearbeiten.Dort kannst zum Beispiel die Zeile
@import url('https://fonts.googleapis.com/css?family=Roboto');einfügen.
Diese Datei wird in den head einer jeden Wiki-Seite eingebunden.
Bis demnächst
MatthiasHallo Matthias,
Ich bin kein Admin und habe somit auch keinen Zugriff auf die MediaWiki-Seiten. Außerdem brauche ich das nur für eine einzelne Seite, dies standardmäßig in den head-Bereich jeder Seite einzubinden, wäre überflüssig.
Grüße, Die IP da halt
-
Hallo,
das Folgende ist zwar eine quick&dirty Lösung, aber selbst erklärend, so dass du das nutzen kannst oder besser noch, daraus eine individuelle Lösung ableiten kannst. Test mal mit damit ....
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Font cheange in Head</title> <style> </style> </head> <body> <!-- Bsp. manuell --> <script> function addfont(){ if (document.getElementById('addstyle') ){ return alert('existiert schon'); } var x = '<style id="addstyle">@font-face{font-family:e5;local: e5;src:url("e5.ttf");}</style>'; document.getElementsByTagName('head')[0].innerHTML = document.getElementsByTagName('head')[0].innerHTML +x; } </script> <!-- Bsp. automatisch --> <script> onload=function addfont_auto(){ var x = '<style id="addstyle">@font-face{font-family:e5;local: e5;src:url("e5.ttf");}</style>'; document.getElementsByTagName('head')[0].innerHTML = document.getElementsByTagName('head')[0].innerHTML + x; document.getElementById('autochange').style.fontFamily='e5'; } </script> <button onclick="addfont();">Schriftwechsel manuell</button> <button onclick="document.getElementById('addstyle').outerHTML='';">Schriftwechsel rückgängig</button> <button onclick="alert(document.getElementsByTagName('html')[0].outerHTML);">showsource</button> <h1 style="font-family: e5;">Änderung auf Knopfdruck</h1> <p>.....paragraph.</p> <p>....... another paragraph.</p> <div id="autochange"> <h2>Oder Schriftwechsel automatisch</h2> <p>dann z.B. style vordeklarieren und zb. mit ID ansprechen</p> </div> </body></html>*Die Fontdatei(hier e5.ttf) ersetzen durch eigene.
*Hätte es gern als Onlinebeispiel gepostet aber scheint bei den Anbietern nicht zu gehen, kein Zugriff auf Headbereich.
Gruss Henry
-
Hallo,
das Folgende ist zwar eine quick&dirty Lösung, aber selbst erklärend, so dass du das nutzen kannst oder besser noch, daraus eine individuelle Lösung ableiten kannst. Test mal mit damit ....
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Font cheange in Head</title> <style> </style> </head> <body> <!-- Bsp. manuell --> <script> function addfont(){ if (document.getElementById('addstyle') ){ return alert('existiert schon'); } var x = '<style id="addstyle">@font-face{font-family:e5;local: e5;src:url("e5.ttf");}</style>'; document.getElementsByTagName('head')[0].innerHTML = document.getElementsByTagName('head')[0].innerHTML +x; } </script> <!-- Bsp. automatisch --> <script> onload=function addfont_auto(){ var x = '<style id="addstyle">@font-face{font-family:e5;local: e5;src:url("e5.ttf");}</style>'; document.getElementsByTagName('head')[0].innerHTML = document.getElementsByTagName('head')[0].innerHTML + x; document.getElementById('autochange').style.fontFamily='e5'; } </script> <button onclick="addfont();">Schriftwechsel manuell</button> <button onclick="document.getElementById('addstyle').outerHTML='';">Schriftwechsel rückgängig</button> <button onclick="alert(document.getElementsByTagName('html')[0].outerHTML);">showsource</button> <h1 style="font-family: e5;">Änderung auf Knopfdruck</h1> <p>.....paragraph.</p> <p>....... another paragraph.</p> <div id="autochange"> <h2>Oder Schriftwechsel automatisch</h2> <p>dann z.B. style vordeklarieren und zb. mit ID ansprechen</p> </div> </body></html>*Die Fontdatei(hier e5.ttf) ersetzen durch eigene.
*Hätte es gern als Onlinebeispiel gepostet aber scheint bei den Anbietern nicht zu gehen, kein Zugriff auf Headbereich.
Gruss Henry
Hallo Henry,Wie ich herausgefunden habe, funktioniert JavaScript tatsächlich nur auf gesperrten Seiten des Wikis. Das Problem hat sich allerdings ohnehin gelöst, da die Seite ein Wettbewerbsbeitrag und jetzt zur Bewertung gesperrt ist. Trotzdem danke für deine Hilfe und auch die der Anderen.
Grüße, Die IP da halt
-
-
-
-
-