2017-09-25 1 views
0

gesenkt werden Ich benutze Bootstrap und ich versuche, einen Hinweis Absatz p.tiny Text sehr klein zu machen. Die Verwendung von Entwicklertools zeigt mir, dass die Schriftart nicht kleiner sein kann, wenn sie weniger als 15 px beträgt. Hier finden Sie, was ich versucht habe:Die Schriftgröße konnte nicht mit CSS

window.history.back();
nav, 
 
.container { 
 
    display: none; 
 
} 
 

 
h1 { 
 
    color: red; 
 
} 
 

 
div.panel * { 
 
    text-align: center; 
 
    font-family: AraJozoor-Regular, Arial, Ubuntu, serif; 
 
    text-shadow: 1px 0px 2px #800000; 
 
} 
 

 
div.panel hr { 
 
    height: 20px; 
 
    background: red; 
 
} 
 

 
div.panel img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
p.tiny { 
 
    font-size: 8px !important; 
 
    text-shadow: none; 
 
    font-style: italic; 
 
    font-weight: 400; 
 
    font-family: sans-serif; 
 
}
<div class="panel"> 
 
    <img src="/imgs/wrong.png" /> 
 
    <h1>Error: 1</h1> 
 
    <h3>This Application Works Only With Javascript Enabled Browsers.</h3> 
 
    <h3>Please contact the system Administrator.</h3> 
 
    <div>Your browser: Chrome, Version: 61.0<sup>(*)</sup></div> 
 

 
    <hr /> 
 
</div> 
 
<p class="tiny">(*): It`s estimated information and it may not be accurate enough.</p>

Ich habe auch versuchte die Schriftgröße von p.tiny mit proportionalen Einheiten zu setzen, das heißt % und em aber das würde die Schriftgröße entweder nicht verringern.

+0

ist '.tiny' als andere Klassendeklaration verwendet, haben Sie mehr davon haben? –

+0

Ich habe gerade Ihren Code kopiert und es sieht gut aus für mich: https://codepen.io/andrasadam93/pen/NadGBE –

+0

Der Code, den Sie gebucht haben, ist in Ordnung. Es muss etwas in deinem externen Stylesheet sein. Welche Stile hat der Element-Inspektor Ihnen gezeigt, die angewendet wurden? – FluffyKitten

Antwort

0

Einige Browser haben eine "minimale Schriftgröße" Einstellung (zum Beispiel Firefox: 10px) und sie werden keinen Text anzeigen, der kleiner ist, damit er immer lesbar bleibt. Dies ist eine reine Browsereinstellung und überschreibt alle CSS-Regeln. Wenn Sie diese Einstellung auf 8px ändern, sehen Sie das gewünschte Ergebnis, andere Benutzer jedoch nicht, es sei denn, sie ändern diese Einstellung in ihrem Browser.

+0

Ich benutze Chrome ver 61. Also gibt es keine Mittel, die den Browser die gewünschte Größe gehorchen? – SaidbakR

+1

In Chrome gibt es auch eine minimale Schriftgröße. Sie können es für sich selbst anpassen, aber Sie können es nicht anderen Benutzern über Ihren Website-Code erzwingen. – Johannes

+3

@ SaidbakR Ich benutze Chrome v.60 und ich kann immer noch die p.tiny als 2px in Andrew Adams Codepen (codepen.io/andrasadam93/pen/NadGBE), und ich habe nie meine minimale Schriftgröße von der geändert Standard, wenn Sie also keine eigene Schriftgröße haben, die auf 15px eingestellt ist, bin ich mir nicht sicher, ob das das Problem ist? – FluffyKitten

-1

Der Code, den Sie in der Frage angegeben haben, hat den Stil und das Skript-Tag zwischen </head> und <body>. Dies ist nicht zulässig. Versuchen Sie, die Tags zu verschieben?

hier eine Arbeitsversion plnkr.co/edit/FFB1K3j1dmUaWdBir5M9?p=preview

+0

Sorry, aber was meinst du mit 'nicht legal' ? Beim Erstellen einer Benutzeroberfläche ist es üblich, einen Stil neben das Segment, an dem Sie gerade arbeiten, zu werfen und ihn später zu refaktorieren. –

+0

@AndrewAdam Sie dürfen nur ein Kopf- und Körper-Tag innerhalb eines HTML-Tags haben https://www.w3.org/TR/html5/semantics.html –

+0

@JamesHarrington Dies sind Standards, die Renderergebnisse werden jedoch nicht beeinflusst. – SaidbakR

Verwandte Themen