2014-01-05 10 views
7

Ich habe ein paar Probleme mit dem Cursor im Ace-Editor nicht richtig verteilt. Das Problem hat mit dem Font-Abstand zu tun und anscheinend ist die Lösung, nur monospaced Schriftarten zu verwenden.Ace Editor Monospace Fonts Probleme mit dem Cursor Abstand

Hier ist eine weitere SO Frage zu dem Problem. ace editor cursor behaves incorrectly

Mein Problem kann etwas mit Bootstrap Thema zu tun haben, aber ich bin mir nicht ganz sicher.

Wenn ich Chrom Entwickler-Tools öffnen und in dem ace-Editor verwendet, bei der Schrift betrachten, heißt es, dass meine Bootstrap-Vorlage der Schriftarten verwendet

input, textarea, input[type="submit"]:focus, div { 
    outline: 0 none; 
    font-family: 'Open Sans', sans-serif; 
} 

Wenn ich meine CSS hinzufügen

.ace-editor { 
    font-family: monospace !important; 
} 

Ich habe immer noch ein Problem mit der Cursor-Abstand ist falsch, und seltsamerweise, die Schriftart, die verwendet wird, sieht genauso aus wie die "Open Sans" in Bootstrap definiert.

Öffnen in Chrome-Dev-Tools besagt, dass die berechnete Eigenschaft 'Monospace' ist, also etwas soll funktionieren, aber es ist nicht. Hier wird es wirklich komisch.

Wenn ich die Schriftart-Einträge für beide .ace-editor und input, textarea... entfernen, bekomme ich eine perfekt aussehende Schriftart, die funktioniert. Geht man zu den berechneten Eigenschaften, zeigt die Font-Familie wieder 'Open Sans' zu sein.

Die Frage, die ich beantworten möchte, ist, wie kann ich herausfinden, welche Schriftart tatsächlich verwendet wird, wenn ich den Textarea-Eintrag von Bootstrap abbringe? Oder warum akzeptiert das die Monospace-Schriftart nicht, wenn es angegeben wird.

Ich gehe davon aus, dass "Open Sans" möglicherweise monospaced ist, aber was auch immer, es verursacht immer noch massive Kopfschmerzen.

Antwort

9

Das Problem wird durch div in der Bootstrap-Regel enthalten verursacht. Es ist zu breit und bricht Zeichenbreitenmessungen für ace. Sie können

.ace_editor div { 
    font: inherit!important 
} 

als Behelfslösung hinzuzufügen. Es wäre gut, dem Ersteller der Bootstrap-Vorlage auch ein Problem mitzuteilen.

+0

Vielen Dank. Stunden damit zu spielen (von dir gelöst) Ich werde es auch dem Bootstrap-Ersteller melden. – pedalpete

+4

Mein Fall war 'body * {font-family: ...}' so '.ace_editor * {font-family: ...}' mach den Job für mich. –