Yazı Tipi

Seçili metne bir yazı tipi ailesi uygulayın. Bir aralık seçiliyse yalnızca o aralık değişir; yalnızca imleç varsa geçerli paragraftaki metne uygulanır. Gerçek yazı tipi dosyaları ve font-family değerleri hizmetin CSS'sinde tanımlanır.

Varsayılan aileler sans, serif, mono ve cursivetir. Özellikle Türkçe ya da başka çok dilli içerik kullanan hizmetlerde her ailenin hangi yazı tiplerini kullanacağını açıkça belirlemek daha iyidir.

Kanatlar
Temel yazı tipiOfset
HTMLDüzenleyici yükleniyor…
JSONnabi-treeDüzenleyici yükleniyor…
Yükle
npm install nabi-note
Kod
import {
  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: 'tr' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'tr' }
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()))
ts
const selected = wings().use('tf', {
  values: ['sans', 'serif', 'mono'],
}).build()

values verilmezse tüm varsayılan aileler kullanılır. Belgelerde yalnızca values içinde yer alan değerlere izin verilir.

CSS stilleri

Belge yalnızca aile adını saklar; yazı tipi dosyalarını CSS seçer. Değişkenleri hem düzenleyici hem yayımlanmış görünüm için aynı kapsayıcıda değiştirin.

css
.nabi-content {
  --nabi-font-serif: "Noto Serif", "Noto Serif KR", serif;
  --nabi-font-mono: "JetBrains Mono", monospace;
}

Web yazı tipleri kullanıyorsanız önce bu dosyaları yükleyin. cursive birçok dil için genellikle yeterli kapsama sahip değildir; bu yüzden hizmetinizde kullanacağınız gerçek yazı tipini seçtikten sonra sunmak daha iyidir.