Die IP da halt: selfhtml-wiki: Google-Fonts

problematische Seite

Hallo. 😀

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

  1. problematische Seite

    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.
    1. problematische Seite

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

      Ich persönlich halte das aber auch für den falschen Weg…

      LG,
      CK

      1. problematische Seite

        @@Christian Kruse

        Es gibt Leute, die Stylesheets aus Performance-Gründen am Ende des body einbinden.

        Oder auch mittendrin. Jake Archibald ist so ein Leut.

        Posting von yours trulyThe 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
        1. problematische Seite

          Hallo Gunnar,

          Es gibt Leute, die Stylesheets aus Performance-Gründen am Ende des body einbinden.

          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 defer oder async für CSS-Resourcen.

          LG,
          CK

    2. problematische Seite

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

      Hallo Matthias,

      Habe ich gerade getestet, schon allein style scoped scheint nicht zu funktionieren, wie die Seite hier zeigt.

      Grüße, Die IP da halt

  2. problematische Seite

    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

    1. problematische Seite

      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

      1. problematische Seite

        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.
        1. problematische Seite

          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.

        2. problematische Seite

          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

          Hallo 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

          1. problematische Seite

            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

            1. problematische Seite

              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