Schriftart
Wenden Sie eine Schriftfamilie auf den ausgewählten Text an. Wenn ein Bereich ausgewählt ist, ändert sich nur dieser Bereich; wenn nur der Cursor vorhanden ist, wird er auf den Text im aktuellen Absatz angewendet. Die tatsächlichen Schriftdateien und font-family-Werte werden durch das Service-CSS definiert.
Die Standardfamilien sind sans, serif, mono und cursive. Besonders in Diensten, die koreanische oder andere mehrsprachige Inhalte enthalten, ist es besser, explizit zu entscheiden, welche Schriftarten jede Familie verwenden soll.
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, typefaceWing, fontSizeWing, dropCapWing,
mountViewTools,
} from 'nabi-note'
const selected = [
typefaceWing,
fontSizeWing,
dropCapWing,
]
const { nabi, registry } = createNabiWith(selected)
const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!
// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'de' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'de' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })
// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))const selected = wings().use('tf', {
values: ['sans', 'serif', 'mono'],
}).build()Wenn values weggelassen wird, werden alle Standardfamilien verwendet. Nur in values enthaltene Werte sind in Dokumenten erlaubt.
CSS-Stile
Das Dokument speichert nur den Familiennamen, und CSS wählt die Schriftdateien aus. Ändern Sie die Variablen auf demselben Container sowohl für den Editor als auch für die veröffentlichte Ansicht.
.nabi-content {
--nabi-font-serif: "Noto Serif", "Noto Serif KR", serif;
--nabi-font-mono: "JetBrains Mono", monospace;
}Wenn Sie Web-Schriften verwenden, laden Sie diese Schriftdateien zuerst. cursive hat oft keine gute Abdeckung für viele Sprachen, daher ist es besser, sie erst bereitzustellen, nachdem Sie die tatsächliche Schriftart gewählt haben, die Ihr Service verwenden wird.