Ergebnis 1 bis 10 von 10

Thema: Schriftgre ndert sich radikal auf anderen PC

  1. #1
    HTML Newbie
    Registriert seit
    16.04.2015
    Beitrge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Schriftgre ndert sich radikal auf anderen PC

    Ich habe hier ein Phnomen, bei dem ich nicht weiter weis.
    Es handelt sich um eine Webseite die bei unseren Kunden als Digitale Preisauszeichnung auf Monitoren dargestellt wird.
    An den Monitoren sind miniPC angeschlossen auf denen Debian (Etch, Squeeze) luft.
    Da die Gerte nur eine Webseite herunterladen und anzeigen mssen, bleiben sie, was Updates der Linuxdistribution angeht immer auf dem selben Stand.
    Es luft also die Debianversion darauf, die zum Zeitpunkt der Installetion aktuell war.
    Eben damit sie keine Fehler durch nderungen bekommen.

    Inzwischen mussten wir erneut auf neuere Gerte umstellen. Wegen der Hardware-Kompatibilitt ist dort ein aktuelles Debian installiert.

    Jetzt zum Problem.
    Die neuen Gerte zeigen die Schrift auf den Webseiten viel kleiner an.

    Alle Gerte, ob alt oder neu, laden die selben Seiten herunter. Die Seiten sind nicht fr die neuen Gerte angepasst worden.
    Alle Schriftgren sind mit PX angegeben.
    Die Hintergrundgrafiken (Tafeln) sind JPG mit Grenangabe in PX. Diese bleiben alle korrekt dargestellt, egal auf welchem PC.

    Hier zwei Bilder, die den krassen Unterschied verdeutlichen:
    Dies ist die korrekte Schriftgre:

    gross.jpg

    Und hier die exakt selbe Webseite mit festen px-gren fr die Schriftart auf den neuen Gerten:
    klein.jpg

    Ich habe keine Ahnung, woran es liegen knnte.
    Vor allem sind ausschlielich die Schriften betroffen, die Hintergrundgrafiken bleiben ja korrekt dargestellt.

    Auf allen Rechnern luft auch der selbe Browser in der selben Version (Iceweasel 2.0.0.9) und selben Konfiguration.
    Browserinterne Gren der Schriftanzeige sind deaktiviert.

    Ich kann mir nicht vorstellen, dass die Hardware das Verursacht.

    Hat jemand eine Idee, ob es am HTML/CSS liegt?


    Hier ist der Quellcode:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="robots" content="noindex, nofollow" /><meta http-equiv="refresh" content="900" />    
       </head>
    
        
    <body bgcolor="black">
    <style type="text/css">#EdekaChalk-Regular_klein
            {
                font-family:"EdekaChalk-Regular";
                font-weight:normal;
                font-size:45px;
                color:#FFFFFF;
                line-height:150%;
                letter-spacing:2;
            }
    #EdekaChalk-Regular_gross
            {
                font-family:"EdekaChalk-Regular";
                font-weight:normal;
                font-size:70px;
                color:#FFFFFF;
                line-height:90%;
                letter-spacing:2;
            }
    #EdekaChalk-Regular_gp
            {
                font-family:"EdekaChalk-Regular";
                font-weight:normal;
                font-size:17px;
                color:#FFFFFF;
                line-height:2;
            }
    #EdekaChalk-Regular_gew
            {
                font-family:"EdekaChalk-Regular";
                font-weight:normal;
                font-size:30px;
                color:#FFFFFF;
                letter-spacing:2;
            }
    #EdekaChalk-Regular_preis
            {
                font-family:"EdekaChalk-Regular";
                font-weight:normal;
                font-size:120px;
                color:#FFFFFF;
                line-height:70%;
            }
    #EdekaChalk-Regular_eur_gr
            {
                font-family:"EdekaChalk-Regular";
                font-size:60px;
                font-weight:normal;
                font-style:normal;
                color:#FFFFFF;
            }
    #EdekaChalk-Regular_eur_kl
            {
                font-family:"EdekaChalk-Regular";
                font-size:11.333333333333px;
                font-weight:normal;
                font-style:normal;
                color:#FFFFFF;
            }
    #EdekaChalk-Regular_h
            {
                font-family:"EdekaChalk-Regular";
                font-weight:normal;
                font-size:14px;
                color:#FFFFFF;
                line-height:0.4;
            }
    </style>
    
    <div style="overflow:hidden;position:absolute;left:0px;top:0px;height:256px
                            ;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
                            <img src="des/img/tafel.jpg" border="0px" width="640px"/>
                        </div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
                            40px;overflow:hidden;height:199px" align="left">
                            <font id="EdekaChalk-Regular_gross">
                            saftiger<br />
                            <font id="EdekaChalk-Regular_klein">
                            Rinderschmorbraten
                            </font>
                            </font>
                        </div>
                        <div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
                            <font id="EdekaChalk-Regular_gew">1kg</font>&nbsp;&nbsp;<font id="EdekaChalk-Regular_preis">7,99</font>
                        </div>
                        <div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
                            
                        </div>
    
                        
    
                    </div>\n\n<div style="overflow:hidden;position:absolute;left:640px;top:0px;height:256px
                            ;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
                            <img src="des/img/tafel.jpg" border="0px" width="640px"/>
                        </div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
                            40px;overflow:hidden;height:199px" align="left">
                            <font id="EdekaChalk-Regular_gross">
                            deutsches Jungbullenfleisch<br />
                            <font id="EdekaChalk-Regular_klein">
                            Rindergulasch
                            </font>
                            </font>
                        </div>
                        <div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
                            <font id="EdekaChalk-Regular_gew">1kg</font>&nbsp;&nbsp;<font id="EdekaChalk-Regular_preis">6,99</font>
                        </div>
                        <div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
                            
                        </div>
    
                        
    
                    </div>\n\n<div style="overflow:hidden;position:absolute;left:0px;top:255px;height:256px
                            ;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
                            <img src="des/img/tafel.jpg" border="0px" width="640px"/>
                        </div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
                            40px;overflow:hidden;height:199px" align="left">
                            <font id="EdekaChalk-Regular_gross">
                            Irish OX<br />
                            <font id="EdekaChalk-Regular_klein">
                            Rib-Eye- Steak
                            </font>
                            </font>
                        </div>
                        <div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
                            <font id="EdekaChalk-Regular_gew">100g</font>&nbsp;&nbsp;<font id="EdekaChalk-Regular_preis">2,77</font>
                        </div>
                        <div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
                            
                        </div>
    
                        
    
                    </div>\n\n<div style="overflow:hidden;position:absolute;left:640px;top:255px;height:256px
                            ;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
                            <img src="des/img/tafel.jpg" border="0px" width="640px"/>
                        </div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
                            40px;overflow:hidden;height:199px" align="left">
                            <font id="EdekaChalk-Regular_gross">
                            frisches<br />
                            <font id="EdekaChalk-Regular_klein">
                            Putenschnitzel- oder Gulasch
                            </font>
                            </font>
                        </div>
                        <div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
                            <font id="EdekaChalk-Regular_gew">1kg</font>&nbsp;&nbsp;<font id="EdekaChalk-Regular_preis">6,99</font>
                        </div>
                        <div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
                            
                        </div>
    
                        
    
                    </div>\n\n<div style="overflow:hidden;position:absolute;left:0px;top:510px;height:256px
                            ;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
                            <img src="des/img/tafel.jpg" border="0px" width="640px"/>
                        </div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
                            40px;overflow:hidden;height:199px" align="left">
                            <font id="EdekaChalk-Regular_gross">
                            frische<br />
                            <font id="EdekaChalk-Regular_klein">
                            H&auml;hnchenschenkel m.R&uuml;ckenst&uuml;ck
                            </font>
                            </font>
                        </div>
                        <div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
                            <font id="EdekaChalk-Regular_gew">1kg</font>&nbsp;&nbsp;<font id="EdekaChalk-Regular_preis">1,50</font>
                        </div>
                        <div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
                            
                        </div>
    
                        
    
                    </div>\n\n<div style="overflow:hidden;position:absolute;left:640px;top:510px;height:256px
                            ;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
                            <img src="des/img/tafel.jpg" border="0px" width="640px"/>
                        </div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
                            40px;overflow:hidden;height:199px" align="left">
                            <font id="EdekaChalk-Regular_gross">
                            frische<br />
                            <font id="EdekaChalk-Regular_klein">
                            H&auml;hnchenbrust
                            </font>
                            </font>
                        </div>
                        <div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
                            <font id="EdekaChalk-Regular_gew">1kg</font>&nbsp;&nbsp;<font id="EdekaChalk-Regular_preis">3,99</font>
                        </div>
                        <div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
                            
                        </div>
    
                        
    
                    </div>\n\n
    </body>
    
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist lter als 90 Tage. Die darin enthaltenen Informationen sind mglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Knig(in)
    Registriert seit
    13.06.2012
    Beitrge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Da du eine kommerzielle Frage stellst, gibt doch dem geneigten User ein Honorar an.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfhig.

  3. #3
    Bandit
    Gast

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Ich tippe auf unterschiedliche Fontdateien

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    16.04.2015
    Beitrge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Die Fontdateien sind die selben. Die werden seit Jahren in jedes Installations-Image aus der selben Quelle installiert.
    Diese Webseiten werden auch nicht einfach von beliebigen Rechnern aus abgerufen sondern nur von unseren mini-PC Clients. Und auf diesen Clients sind alle Fonts installiert, die ntig sind. Und es sind immer die selben Dateien.

  5. #5
    Bandit
    Gast

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Unterschiedliche Browserversionen?

    Ich wrde mir die Tafeln sowieso mit PHP erstellen, um solche Fontprobleme zu beseitigen. Da braucht der Client die Fonts selber nicht mehr.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    16.04.2015
    Beitrge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Die Browser sind alle in der gleichen Version. Ist auch ntig, weil ein bentigtes Plugin nur auf den alten Versionen luft.
    Die Tafeln per PHP als Grafik zu erzeugen habe ich schon fr eine Preview-Funktion versucht. War aber sehr umstndlich. Ging damals ber imagemagick und da gab es Probleme mit Umlauten usw.

    Ich bin aktuell dabei das ganze System neu aufzusetzen. Die Grundlage der aktuellen Version wurde von einem Vorgnger von mir erstellt und weist viele Fehler auf, die sich jetzt nach und nach bemerkbar machen (Verschachtelungsfehler mehrfache <body>-Tags wegen falscher includes, usw.)
    Bei der neuen Version werde ich mit canvas arbeiten und habe da schon gute Tests laufen.

    Aber bis zur Fertigstellung dauert es noch und daher muss ich das Problem hier schnell anders lsen.

    @Gastl
    Zum Thema Bezahlung mchte ich nur sagen, dass mir hier niemand meine eigentliche Arbeit abnehmen soll. Ich verlange keine fertigen Scripte oder dass sich jemand hier stundenlang gegen seinen Willen hinsetzt und an einer Lsung fr mich "arbeitet".
    Ich programmiere mir das spter selbst zurecht. Ich habe nur das Problem, dass mein Wissen nicht ausreicht, um den Fehler zu entdecken, den ich beheben will. Und daher wende ich mich hoffnungsvoll an eine Programmierer-Community, die mir vielleicht mit Tipps und Ideen helfen kann, den Grund fr das Problem zu finden.

  7. #7
    Bandit
    Gast

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Zitat Zitat von Hygrom Beitrag anzeigen
    Die Tafeln per PHP als Grafik zu erzeugen habe ich schon fr eine Preview-Funktion versucht. War aber sehr umstndlich. Ging damals ber imagemagick
    Das ist doch nicht umstndlich und funktioniert mit den PHP-Grafikfunktionen. Dafr ist ein einziges Script erforderlich, mehr nicht.

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    16.04.2015
    Beitrge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Wir haben den Text mit imagettftext eingesetzt. Da es aber verschiedene Layouts gab, teilweise Blcke mit mehrzeiligen Eintrgen, die bereinander positioniert und abhngig von einander relativ positioniert werden mussten war es sehr aufwndig. Umlaute wurden von imagettftext nicht bernommen und mussten durch Punkte ersetzt werden, deren Position genau und in Abhngigkeit von Gre, Buchstabenbreite usw. berechnet werden musste, Transparente Pixel mussten aufgrund der nicht homogenen Hintergrnde der Tafel automatisch erzeugt werden usw. es war echt heftig. Wie gesagt, das war 2008. Heute geht das mit html2Canvas viel leichter.
    Aber ich kann das Ding nicht komplett umschreiben.

    Ich bin noch der Hoffnung, dass es sich um einen einzigen blden Fehler handelt, den ich nicht sehe.
    Wenn ich eine Webseite baue und eine Schrift mit einer Pixelgre von 40px definiere, wie kann es dann sein, dass diese Schrift pltzlich bei einem PC um 1/3 kleiner erscheint, obwohl es im Quelltext immer noch 40px sind, DIV-Rahmen, die man mit 40px um sie zeichnet bleiben aber auf allen Gerten gleich gro?
    Ganz unabhngig von einem Tafelhintergrund o..

    - - - Aktualisiert - - -

    So.. Um mal ganz weg von irgendwelchen Tafel zu kommen habe ich die ganze Sache jetzt auf ein Minimum reduziert:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
    </style>
    </head>
    <body bgcolor="black">
    
    <div style="font-family:arial;font-size:40px; color: white;">
      deutsches Jungbullenfleisch
    </div>
    
    <div style="width: 177px; height: 27px; border: 2px solid red; position: absolute; top: 7px; left: 0px;">
    </div>
    </body>
    </html>
    Hier ist die Live-Ansicht:
    http://www.mss-portal.eu/upload/beispiel.html

    Ich habe keine externe Schriftdatei verwendet, sondern nur font-family:arial eingegeben.

    Um die ersten Worte habe ich einen roten Rahmen gezogen.
    Bei unseren Gerten hier sieht das auch gut aus. Falls es bei euch schon anders aussieht, wre das vielleicht schon ein Hinweis.

    So soll es aussehen und sieht hoffentlich bei euch auch aus:
    gross.jpg

    Und so sieht es auf dem Problemgert aus:
    klein.jpg

    In diesem Script gibt es keine Schriftdateien, die Box ist in beiden Fllen 177x27px gro und erscheint auch auf den Bildschirmen immer gleich gro. (Deswegen hatte ich die Tafeln genommen, um zu zeigen, dass grafische Elemente unverndert sind.)

    Die Schrift schrumpft also auf dem einen Gert. Ich habe festgestellt, dass sie nicht schrumpft, wenn man gar keine Schrift angibt und der Browser die systemeigene Schrift benutzt.
    Aber sobald man eine Schriftart definiert, egal ob extern vom System bereitgestellt, zerschiesst das Design.

  9. #9
    Bandit
    Gast

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    Tja, ich muss gestehen, mir fllt dazu nicht viel ein.

  10. #10
    Meister(in)
    Registriert seit
    24.02.2007
    Beitrge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Schriftgre ndert sich radikal auf anderen PC

    In meinem Debian 7.8 ist alles ok.
    Gendert von djheke (16.04.2015 um 23:55 Uhr)

hnliche Themen

  1. buttongre ndert sich ungewollt
    Von mamaplatzda im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.01.2007, 14:59
  2. Problem mit Tabelle - Schriftgre verndern sich
    Von Jimbo im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.11.2006, 08:57
  3. Schriftgre lt sich nicht verndern.
    Von 00eraser00 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 3
    Letzter Beitrag: 12.10.2006, 09:54
  4. schrift ndert sich
    Von annchen im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 13.09.2006, 18:48
  5. button --> nur die schrift ndert sich
    Von GAST im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 10.12.2004, 15:40

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhnge hochladen: Nein
  • Beitrge bearbeiten: Nein
  •