HTML & CSS: Bearbeiten von schriftart/Schriftgröße?

Bin ich mit einem custom font (Oswald) für die überschriften oder Titel, die in meiner Seite. Ich glaube, dass die " Höhe in Konflikt mit den systemeigenen Schriftarten (Arial, san-serif usw.) und würde gerne wissen, ob es einen Weg gibt, um beide Schriftarten gleichmäßig...? Wenn mehr text platziert wird später, die Lücke, der Unterschied wird erheblich sein.

Bitte werfen Sie einen Blick auf das, was ich hier habe: http://jsfiddle.net/x6v7F/

Ich habe eine temporäre hintergrund fade in und out zu illustrieren.

danke.

  • Sorry Rob, ich weiß nicht wirklich verstehen, was dein problem ist?
  • Was ist das problem genau?
  • Werden Sie sagen, die Höhe des Oswald 12px font entspricht nicht der Höhe des 12px Arial-schriftart?
  • M und Péter Varga...im Grunde jede Spalte sollte die gleiche Höhe mit der richtigen Menge an text...aber weil die benutzerdefinierte schriftart in der Spalte zwei, ist es kürzer/länger als die anderen. Als Brook Julias erwähnt, glaube ich, etwas falsch ist mit der Höhe des 12px Oswald Schrift, wie es scheint nicht den gleichen Höhe wie die Arial 12px font und Frage mich, wie man über die Festsetzung dieses.
  • Ich bin nicht einverstanden, dass Sie akzeptierte Antwort richtig ist. Es ist eine schlechte Update, um ein problem, das, wenn ich missverstanden haben, kann ich Ihnen eine korrekte Antwort?
  • spielen w/ font-size zu line-up der Unterseite, einen Abschnitt oder Abschnitt ist eine verlorene Schlacht.
  • Implementiert habe ich den vorgeschlagenen code und zuerst schien es geklappt zu haben, also nahm ich an, dass da eine Lösung. Aber freu mich drüber einmal möchte ich Sie bitten zu vermeiden, Einstellung der Höhe für jede Spalte, da, wenn der Benutzer wollte mehr/weniger text, text schreiben würde, über/hinter die Tasten, und würde es vorziehen, einfach damit jede text-Zeile, line-up als das hantieren mit der Tasten-position.

InformationsquelleAutor user1752759 | 2012-05-11
  1. 1

    Scheint es nicht zu sein font-size Problem, das Problem schien zu sein, mit Ihnen die Angabe der line-height

    Wenn Sie sehen, diese fiddle, können Sie sehen, ich habe mich verändert h1 und h2 diese line-heights

    h1 {
    font: 16px 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color:#000000;
    margin:14px 0;
    line-height: 100%; <----
}

h2 {
    font: 12px 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color:#BBBBBB;
    margin-bottom: 14px;
    line-height: 100%; <----
    letter-spacing: .2px;    
}

    Wenn Sie überprüfen, dass Fiddle, es scheint Ihr problem gelöst?

    • Vielen Dank für Ihre Zeit und Mühe @Joshua M, aber mit den Spalten Lagen neben einander, es zeigt noch columntwo text ein wenig höher oder unter dem rest, wenn ich Sie vergleichen.
    InformationsquelleAutor Joshua M
  2. 1

    Rob hat 4 Abschnitte, die nebeneinander sitzen (Sie können bump up der Breite der jsfiddle-Fenster). Sein prob ist, dass er will, dass seine Abschnitte, um eine Linie entlang der Unterseite, aber das ist Problem, weil die unterschiedlichen Textgrößen zwischen seinem Körper schriftart und-header Schriftarten.

    Viele der css-grid-frameworks versuchen, um diese Art von Fragen: normalisieren der Höhen von text und überschriften, so dass alle Linien fallen auf ein imaginäres Netz von Basislinien.

    Um ehrlich zu sein, ich würde nur geben Sie den Abschnitten eine statische Höhe und lassen Sie einige fuzzy-Raum an der Unterseite für Fehlerquote.

    section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }

    Bearbeiten:

    Wenn Sie auf der Suche nach einem dynamischen Abschnitt Höhe, die Sie haben, zu nutzen, die javascript-Magie. JQuery:

      <style>
    section { position:relative; padding-bottom:50px; }
    section .button { position:absolute; bottom:0; right:0; }
  <style>

  <script>
    var max_height = 0;
    $('section').each(function() {
      max_height = Math.max(max_height, $(this).height());
    }).height(max_height);
  </script>
    • Spot on @ltiong_sh, aber ich möchte vermeiden, eine Höhe für die Spalten, wenn möglich, und würde gerne nach unten gehen, der Weg, den Sie vorgeschlagen, von der Normalisierung der Höhen von text und überschriften, so dass alle Linien fallen auf ein imaginäres Netz von Basislinien.
    • es ist ein Verlustgeschäft, denn an diesem Punkt würden Sie brauchen, um die Kontrolle der Höhen, basierend auf der Anzahl der "Zeilen". Wenn Sie sich entscheiden, fügen Sie 3-Header ein Abschnitt..Sie müssten "neu berechnen", wie viele "Zeilen" würden Sie dann aufnehmen zu können.
    InformationsquelleAutor ltiong_sh
Schreibe einen Kommentar