自定义样式
自定义颜色
为了更容易观察填充颜色变化，调大了字体。
0110110440,,055011044
你还可以将下列属性作为文本颜色：
点击查看代码
vue
<script setup>
import { ref } from "vue";
const number = ref(114514);
function switchNumber() {
number.value = Math.floor(Math.random() * 1000000);
}
const color = ref(
"#" +
Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, "0")
);
</script>
<template>
<div class="text-center">
<vue-to-counter-number
class="!text-8xl font-bold"
:value="number"
:color="color"
locale-number
/>
</div>
<hr />
<div class="flex gap-4">
<input class="border border-solid p-1" v-model="number" type="number" />
<button class="border border-solid p-1" @click="switchNumber">切换</button>
<span class="flex-auto" />
<input class="border border-solid p-1" v-model="color" type="color" />
</div>
<div class="flex flex-col mt-4">
<div>你还可以将下列属性作为文本颜色：</div>
<ol>
<li>
<label>
<input
type="radio"
name="color"
value="linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"
v-model="color"
/>
CSS 渐变属性
</label>
</li>
<li>
<label>
<input
type="radio"
name="color"
value="url('https://picsum.photos/400/300')"
v-model="color"
/>
CSS 图片属性（加载图片时会有一段空白时间）
</label>
</li>
<li>
<label>
<input
type="radio"
name="color"
value="linear-gradient(rgba(255, 0, 0, 0.4), rgba(0, 0, 255, 0.4)), url('https://picsum.photos/400/300')"
v-model="color"
/>
CSS 渐变属性 + 图片属性
</label>
</li>
</ol>
</div>
<div class="flex gap-4"></div>
</template>
<style scoped></style>vue
<script setup>
import StackblitzLogo from "../assets/stackblitz-logo.svg";
import { ref, toRefs } from "vue";
import { getCodeStackblitzParams } from "./generate-stackblitz-params";
import sdk from "@stackblitz/sdk";
import packageInfo from "../../vue-to-counter/package.json";
const props = defineProps({
title: {
type: String,
required: true,
},
});
const { title } = toRefs(props);
const containerRef = ref();
function handleStackblitz() {
if (!containerRef.value) return;
const tabs = containerRef.value.querySelectorAll(".tabs > label");
const blocks = containerRef.value.querySelectorAll(".blocks > div code");
if (tabs.length !== blocks.length) {
window.alert("The number of tabs and code blocks should be the same.");
return;
}
const files = Array.from(tabs).map((tab, index) => ({
filename: tab.textContent.trim(),
content: blocks[index].textContent,
}));
const params = getCodeStackblitzParams(files, {
title: `${title.value} - vue-to-counter@${packageInfo.version}`,
});
sdk.openProject(params, {
openFile: "src/demo.vue",
});
}
</script>
<template>
<div ref="containerRef" class="demo-container">
<div class="flex relative">
<span class="flex-auto" />
<span
title="Open In Stackblitz"
class="inline-block p-1 cursor-pointer hover:outline hover:outline-[#1389FD] outline-1"
@click="handleStackblitz"
>
<img
class="h-4 w-4 pointer-events-none"
:src="StackblitzLogo"
alt="CodeSandbox Logo"
/>
</span>
</div>
<hr />
<slot />
</div>
</template>
<style lang="scss">
.demo-container {
@apply flex flex-col justify-center border p-4 rounded-lg mt-4 text-sm;
.vue-to-counter {
@apply font-mono text-4xl;
}
.custom-block {
@apply m-0;
}
}
</style>自定义字体
可以直接通过设置 CSS 属性来自定义字体的各种属性。
0110110440,,055011044
Roboto
Open Sans
Noto Sans JP
Montserrat
Inter
Poppins
Lato
Material Icons
Roboto Condensed
Arimo
Roboto Mono
Oswald
Noto Sans
Raleway
Nunito Sans
Nunito
Playfair Display
Ubuntu
Rubik
Roboto Slab
DM Sans
Noto Sans KR
Merriweather
Work Sans
Kanit
PT Sans
Lora
Material Symbols Outlined
Mulish
Noto Sans TC
Outfit
Manrope
Figtree
Quicksand
IBM Plex Sans
Barlow
Fira Sans
Bebas Neue
Titillium Web
Karla
Source Sans 3
Prompt
Jost
Noto Serif
PT Serif
Heebo
Saira
Material Icons Outlined
Inconsolata
Dancing Script
Archivo
Hind Siliguri
Libre Baskerville
Noto Color Emoji
Josefin Sans
Libre Franklin
Barlow Condensed
Anton
Smooch Sans
Noto Serif JP
EB Garamond
Schibsted Grotesk
Dosis
Cairo
Source Code Pro
Plus Jakarta Sans
Archivo Black
Nanum Gothic
Cabin
Roboto Flex
Noto Sans SC
Bitter
Mukta
Material Symbols Rounded
Pacifico
Ramabhadra
Noto Sans Telugu
Public Sans
Anek Telugu
Assistant
Material Icons Round
Exo 2
M PLUS Rounded 1c
Crimson Text
Alfa Slab One
Hind
Slabo 27px
Oxygen
Lobster
Inter Tight
Red Hat Display
Changa One
Space Grotesk
Cormorant Garamond
Lexend
Arvo
Urbanist
Comfortaa
Tajawal
PT Sans Narrow
Overpass
Caveat
Teko
Abel
DM Serif Display
Fjalla One
Sora
Rajdhani
Asap
Material Icons Sharp
Play
M PLUS 1p
Barlow Semi Condensed
Almarai
Merriweather Sans
Fira Sans Condensed
Lilita One
Be Vietnam Pro
Shadows Into Light
Lexend Deca
Noto Sans Arabic
Noto Sans Thai
Maven Pro
Indie Flower
Source Serif 4
Chakra Petch
Abril Fatface
Material Icons Two Tone
Bodoni Moda
Varela Round
IBM Plex Mono
Cinzel
Orbitron
Exo
Questrial
Saira Condensed
Archivo Narrow
Domine
Satisfy
Marcellus
Nanum Myeongjo
Zilla Slab
Sofia Sans
Noto Sans Display
Zen Kaku Gothic New
Cormorant
IBM Plex Serif
Great Vibes
Rowdies
Kalam
Vollkorn
Spectral
Albert Sans
Instrument Serif
Permanent Marker
Unbounded
League Spartan
Signika Negative
Noto Kufi Arabic
Geologica
Yellowtail
Noto Serif KR
ABeeZee
Signika
Fredoka
Instrument Sans
Frank Ruhl Libre
Asap Condensed
Yanone Kaffeesatz
Catamaran
Sarabun
Alegreya
Hind Madurai
IBM Plex Sans JP
Acme
IBM Plex Sans Arabic
Amatic SC
Alegreya Sans
Bricolage Grotesque
Newsreader
Montserrat Alternates
Noto Serif TC
Nanum Gothic Coding
Righteous
Bree Serif
Amiri
Luckiest Guy
Changa
Russo One
Advent Pro
Cardo
Prata
JetBrains Mono
Hanken Grotesk
Rubik Mono One
Antic Slab
Cantarell
Google Sans Flex
Roboto Serif
Unna
Bangers
Zen Maru Gothic
Passion One
Red Hat Text
DM Mono
Encode Sans
Google Sans Code
Kumbh Sans
Tinos
News Cycle
Patua One
Chivo
Lobster Two
DM Serif Text
Sawarabi Mincho
Libre Barcode 39
Crete Round
Tenor Sans
Gothic A1
BIZ UDPGothic
Space Mono
Hammersmith One
Gruppo
Alata
Fraunces
Old Standard TT
Geist
Noto Sans Tamil
Sawarabi Gothic
Encode Sans Condensed
Noticia Text
Crimson Pro
Libre Caslon Text
Francois One
Literata
Readex Pro
Courgette
Commissioner
Onest
El Messiri
Baskervville
Titan One
Libre Bodoni
Comic Neue
Josefin Slab
Staatliches
Paytone One
Shippori Mincho
Courier Prime
Syne
Vazirmatn
Noto Sans HK
Special Elite
Oleo Script
Sen
Noto Serif SC
PT Sans Caption
Jura
Kaushan Script
Bungee
Viga
Sanchez
Creepster
Aleo
Philosopher
Gloria Hallelujah
Press Start 2P
Saira Extra Condensed
STIX Two Text
Sacramento
Martel
Quattrocento Sans
Actor
Didact Gothic
Ubuntu Condensed
Noto Naskh Arabic
Taviraj
Atkinson Hyperlegible
Rokkitt
Krub
Noto Sans Bengali
Rammetto One
Quattrocento
Concert One
Neuton
Allura
Oxanium
Gilda Display
Quantico
Baloo 2
Playfair Display SC
Amaranth
Epilogue
Berkshire Swash
Poiret One
IBM Plex Sans Condensed
Playfair
League Gothic
Antonio
Fugaz One
Ultra
Pridi
Parisienne
Alexandria
Black Han Sans
Patrick Hand
Bai Jamjuree
Sorts Mill Goudy
Lexend Giga
Architects Daughter
Zen Old Mincho
Kosugi Maru
Rock Salt
Noto Sans Devanagari
Alumni Sans
Tangerine
Material Symbols Sharp
Khand
Golos Text
Fira Code
Noto Serif Bengali
Forum
Chango
Dela Gothic One
Monoton
Sofia Sans Condensed
Yeseva One
Cookie
M PLUS 1
Pathway Gothic One
Italianno
Eater
Noto Sans Mono
Rethink Sans
VT323
Amita
Gelasio
Radio Canada
Anuphan
Calistoga
Monda
Arsenal
Homemade Apple
Alice
Audiowide
Istok Web
Unica One
Delius
Alex Brush
Cuprum
Fira Sans Extra Condensed
PT Mono
Caveat Brush
Reenie Beanie
Vidaloka
Lusitana
Abhaya Libre
Sofia Sans Extra Condensed
Caladea
Hind Guntur
Merienda
Itim
Nanum Pen Script
Lustria
Anonymous Pro
GFS Didot
Volkhov
Eczar
Andada Pro
Ropa Sans
Handlee
Pinyon Script
Mada
Gudea
Syncopate
Goldman
Carter One
Cormorant Infant
Noto Serif Devanagari
Cinzel Decorative
Mitr
Zeyada
Lalezar
Saira Semi Condensed
Petrona
Ubuntu Mono
Mukta Malar
Geist Mono
Bad Script
Sriracha
Sofia
Yrsa
Noto Serif Display
Fira Mono
Gabarito
Racing Sans One
Blinker
Balsamiq Sans
Playball
Noto Sans Hebrew
Faustina
Pangolin
Hind Vadodara
MuseoModerno
Pontano Sans
Charm
Nothing You Could Do
Fjord One
Six Caps
Leckerli One
Economica
Black Ops One
Belanosima
Julius Sans One
Niramit
Mona Sans
Varela
Belleza
Arapey
Sansita
Kaisei Decol
Reddit Sans
Ruda
BenchNine
Padauk
Chewy
Mr Dafoe
Cousine
Boogaloo
Fustat
Afacad
Tomorrow
Cabin Condensed
Anek Devanagari
Bevan
Londrina Solid
Just Another Hand
IBM Plex Sans Thai
Bungee Spice
Basic
Lemonada
Electrolize
Protest Revolution
Marck Script
Potta One
Tektur
Noto Sans Malayalam
Zen Kaku Gothic Antique
Reem Kufi
Hachi Maru Pop
Alegreya Sans SC
Glegoo
Georama
Shippori Mincho B1
Averia Serif Libre
Damion
Alef
Bowlby One SC
Cutive Mono
Pragati Narrow
Rochester
Gochi Hand
Cedarville Cursive
Shrikhand
Martel Sans
Nixie One
Adamina
Michroma
Khula
Yuji Mai
Mrs Saint Delafield
Pirata One
Squada One
Akshar
Grandstander
M PLUS 2
Ms Madi
Kreon
Anton SC
Gloock
Wix Madefor Display
Bona Nova SC
Fredericka the Great
Arya
Judson
Days One
K2D
Jua
Red Rose
Stardos Stencil
Neucha
Coda
Rufina
Palanquin
Do Hyeon
Palanquin Dark
Kiwi Maru
Honk
Biryani
Parkinsans
Material Symbols
Mandali
Inria Serif
Covered By Your Grace
Livvic
Laila
Secular One
Besley
Allerta Stencil
Lateef
Gravitas One
Overpass Mono
Ovo
Yatra One
Rye
Andika
Kameron
Darker Grotesque
Bellota Text
Marcellus SC
Allison
Limelight
Nanum Brush Script
Silkscreen
Spinnaker
Tilt Warp
Italiana
Corben
SUSE
Noto Sans Symbols
La Belle Aurore
Averia Libre
Nova Square
Sarala
Bowlby One
Aclonica
Alatsi
Contrail One
Annie Use Your Telescope
Rakkas
Karma
Aboreto
Glory
Gowun Batang
Brygada 1918
Pattaya
Rozha One
Poller One
Kalnia
Cabin Sketch
Fahkwang
Candal
Proza Libre
Aldrich
Overlock
Chonburi
PT Serif Caption
Noto Nastaliq Urdu
Koulen
Nobile
Oranienbaum
Host Grotesk
Shadows Into Light Two
Podkova
Fondamento
REM
Lexend Exa
Sintony
Castoro
Wix Madefor Text
Krona One
Caprasimo
Young Serif
Armata
Athiti
Familjen Grotesk
Gantari
Atkinson Hyperlegible Next
Murecho
Radley
Caudex
Hepta Slab
Enriqueta
Funnel Sans
TikTok Sans
Bellefair
Oooh Baby
Wallpoet
Anek Bangla
Vina Sans
Dongle
Kosugi
Marmelad
Faster One
UnifrakturMaguntia
Style Script
Amiko
BioRhyme
Cantata One
Arbutus Slab
Goudy Bookletter 1911
Spline Sans
Trirong
Herr Von Muellerhoff
Sofia Sans Semi Condensed
Anek Latin
Baloo Da 2
Julee
Manjari
Alegreya SC
Monsieur La Doulaise
Coming Soon
Arizonia
Knewave
Graduate
Schoolbell
Hahmlet
Libre Caslon Display
Ma Shan Zheng
Metrophobic
Croissant One
Mali
Cormorant Upright
Suez One
Rampart One
Agbalumo
Ubuntu Sans
Major Mono Display
Mate
Azeret Mono
Klee One
Petit Formal Script
Irish Grover
Baloo Bhaijaan 2
Love Ya Like A Sister
B612 Mono
BIZ UDGothic
Bentham
Antic Didone
Yesteryear
Aref Ruqaa
Funnel Display
Halant
Montagu Slab
Sigmar One
Kristi
Hina Mincho
Mochiy Pop One
Antic
Mansalva
Baloo Thambi 2
Allerta
Turret Road
Grand Hotel
Yusei Magic
Cormorant SC
Rosario
Telex
Grenze Gotisch
Tilt Neon
Average Sans
Waiting for the Sunrise
Trocchi
Baloo Chettan 2
Maitree
Calligraffitti
Markazi Text
Lexend Zetta
Notable
Lexend Peta
DotGothic16
Niconne
Noto Sans Sinhala
Jockey One
Spectral SC
Carrois Gothic
IM Fell English
IM Fell English SC
Licorice
Rancho
Rambla
RocknRoll One
Sansita Swashed
Macondo
Encode Sans Semi Condensed
Over the Rainbow
Libre Barcode 39 Text
Cairo Play
Meddon
Geo
Oxygen Mono
DynaPuff
Mouse Memoirs
Norican
Pathway Extreme
Scada
Fascinate
Gentium Plus
Gabriela
Solway
Fresca
Magra
Kantumruy Pro
Ibarra Real Nova
Barriecito
Gurajada
Syne Mono
Odibee Sans
Dawning of a New Day
IM Fell DW Pica
Modak
Jaldi
B612
Mountains of Christmas
Fragment Mono
ZCOOL XiaoWei
Kurale
Bayon
Tiro Bangla
IBM Plex Sans Hebrew
ADLaM Display
Meie Script
Fanwood Text
Hi Melody
Gotu
Prosto One
Kadwa
Copse
Chelsea Market
Bungee Inline
BIZ UDPMincho
Jomhuria
Sniglet
Radio Canada Big
Encode Sans Expanded
Asul
Kaisei Opti
Metamorphous
WindSong
Inria Sans
Quintessential
Seaweed Script
Cambay
Alike
Pixelify Sans
Esteban
IBM Plex Sans KR
Marvel
Corinthia
Cormorant Unicase
Rasa
Noto Sans Khmer
Sunflower
Saira Stencil One
Libre Barcode 128
Della Respira
Average
Rubik Bubbles
Battambang
Hurricane
Red Hat Mono
Chivo Mono
Amarante
Rouge Script
Zen Dots
Voltaire
Federo
Bubblegum Sans
Agdasima
Noto Sans Myanmar
Vast Shadow
Lekton
Playwrite HU
Mr De Haviland
Bigshot One
Noto Sans Lao Looped
Flow Circular
Mina
Miriam Libre
Noto Emoji
Megrim
Expletus Sans
Oregano
Slackey
KoHo
McLaren
Aladin
Capriola
Sue Ellen Francisco
Cherry Bomb One
Birthstone
David Libre
Poly
Piazzolla
Kufam
Coustard
Gamja Flower
Aguafina Script
Noto Sans Georgian
Bungee Shade
Charis SIL
ZCOOL QingKe HuangYou
Original Surfer
Quando
Fauna One
Molengo
Crafty Girls
Nova Mono
Unkempt
Bakbak One
Sarpanch
Tienne
The Nautigal
Sevillana
Goblin One
Cambo
Recursive
Atma
Big Shoulders
Qwigley
Inder
Lacquer
Truculenta
Yuji Syuku
Mukta Mahee
Whisper
Baloo Tamma 2
Anybody
Holtwood One SC
Shantell Sans
AR One Sans
Zen Antique
Noto Serif Hebrew
Elsie
Martian Mono
Iceberg
Inknut Antiqua
Shippori Antique
Walter Turncoat
Euphoria Script
Mukta Vaani
Baloo Paaji 2
Afacad Flux
Sarina
Fuggles
Allan
Brawler
Vibur
Supermercado One
Puritan
Gowun Dodum
Happy Monkey
Buenard
Hanuman
Coiny
Cutive
ZCOOL KuaiLe
MedievalSharp
Zain
Tenali Ramakrishna
Qwitcher Grypen
Ephesis
Wendy One
Encode Sans Semi Expanded
Fuzzy Bubbles
Vesper Libre
Rubik Dirt
Kranky
Baumans
Just Me Again Down Here
Madimi One
Carlito
Germania One
Skranji
Balthazar
Viaoda Libre
Montaga
Freehand
Zen Kurenaido
Thasadith
Give You Glory
Averia Sans Libre
Oleo Script Swash Caps
Square Peg
Salsa
Numans
Ga Maamli
Noto Sans Kannada
Special Gothic
Codystar
Finger Paint
Amethysta
Kelly Slab
Zen Antique Soft
Nosifer
Fontdiner Swanky
IM Fell Double Pica
League Script
Playpen Sans
Anek Malayalam
Ruslan Display
Mako
Gluten
Imprima
Redressed
Alike Angular
Montez
Monomaniac One
Shojumaru
Suranna
Platypi
Meow Script
Artifika
Macondo Swash Caps
Sunshiney
Mallanna
Shanti
Doppio One
Lily Script One
Kodchasan
Gemunu Libre
Jaro
Cherry Cream Soda
Vollkorn SC
Road Rage
Arima
Kablammo
Loved by the King
Spicy Rice
Delicious Handrawn
Uncial Antiqua
Orelega One
Bokor
Almendra
Wire One
Slabo 13px
Sancreek
Ribeye
Monofett
Vujahday Script
Gaegu
Patrick Hand SC
Charmonman
Pompiere
Xanh Mono
Nova Round
Nokora
Beth Ellen
Rhodium Libre
Noto Sans Meetei Mayek
Jersey 25
Mirza
Noto Serif HK
Genos
Libre Barcode 39 Extended Text
Bellota
M PLUS 1 Code
Edu SA Beginner
Sofadi One
Sour Gummy
The Girl Next Door
Cal Sans
Cherry Swash
Raleway Dots
Trade Winds
Rosarivo
Clicker Script
Bilbo Swash Caps
Hedvig Letters Serif
Metal Mania
Stick No Bills
Scheherazade New
New Rocker
Sedgwick Ave
Train One
Kdam Thmor Pro
Gulzar
Angkor
Farro
Sumana
Rubik Glitch
Nova Flat
Dokdo
Benne
Noto Serif Khojki
Jersey 10
Galada
Gugi
Life Savers
Poetsen One
IM Fell Great Primer
Baloo Bhai 2
Prociono
Baloo Tammudu 2
Stalemate
Noto Sans Canadian Aboriginal
Harmattan
Mogra
Noto Sans Armenian
IM Fell DW Pica SC
Dangrek
Sulphur Point
Denk One
Kode Mono
Noto Sans Gujarati
Anaheim
MonteCarlo
Mohave
Henny Penny
Maiden Orange
Miniver
Tiro Devanagari Hindi
Reggae One
Emilys Candy
Comic Relief
Vampiro One
Frijole
Grenze
Special Gothic Expanded One
Bona Nova
Modern Antiqua
Cantora One
BhuTuka Expanded One
Tourney
NTR
Delius Unicase
Crushed
Sono
Kaisei Tokumin
Rubik Doodle Shadow
Delius Swash Caps
Peralta
Protest Riot
Sigmar
Gupter
Rubik Wet Paint
Ysabeau Office
IM Fell French Canon
Voces
Zhi Mang Xing
Mochiy Pop P One
Margarine
Yomogi
Freckle Face
Homenaje
Dynalight
Carme
Libre Barcode 128 Text
Noto Sans Warang Citi
Noto Serif Georgian
Ysabeau SC
Sometype Mono
Swanky and Moo Moo
Moul
Chicle
Duru Sans
Rubik Moonrocks
Teachers
Akaya Kanadaka
Imbue
Carattere
Abyssinica SIL
Borel
Reddit Sans Condensed
Doto
Phudu
Piedra
Freeman
Atomic Age
UnifrakturCook
Scope One
Caesar Dressing
Varta
Waterfall
Lemon
Eagle Lake
IM Fell Double Pica SC
Special Gothic Condensed One
Convergence
Song Myung
Sail
Orienta
Akronim
Mooli
Asar
Stylish
Belgrano
Strait
Zalando Sans SemiExpanded
Katibeh
Ceviche One
Nerko One
Playwrite CU
Ledger
Underdog
Imperial Script
Noto Serif Thai
Noto Sans Math
Akaya Telivigala
Gafata
Nova Slim
Asset
Cute Font
Akatab
Headland One
Iceland
Moon Dance
Noto Sans Syriac
Short Stack
Aoboshi One
Climate Crisis
Alkalami
Protest Strike
Rationale
Kavivanar
East Sea Dokdo
Noto Serif Malayalam
Lavishly Yours
Medula One
Birthstone Bounce
Miltonian Tattoo
IM Fell Great Primer SC
Stick
Manuale
Smythe
Noto Sans Thai Looped
Zilla Slab Highlight
Tiny5
Vend Sans
Lumanosimo
Ruthie
Gayathri
Jolly Lodger
Shalimar
Kenia
Gentium Book Plus
Anta
Overlock SC
Sedgwick Ave Display
Baloo Bhaina 2
Timmana
Barrio
IM Fell French Canon SC
Gorditas
Unlock
Comforter Brush
Science Gothic
Tauri
Keania One
Boldonse
Jomolhari
Karantina
Astloch
Bungee Tint
Gwendolyn
Fenix
Poltawski Nowy
Spirax
Festive
Habibi
Long Cang
Lovers Quarrel
Edu TAS Beginner
Rum Raisin
Redacted
Pavanam
Sree Krushnadevaraya
Nova Script
Alkatra
Grape Nuts
Nova Cut
Mystery Quest
Flamenco
Kulim Park
Londrina Outline
Miltonian
Khmer
Suwannaphum
Kedebideri
Englebert
Metal
Nova Oval
Kavoon
Sansation
Texturina
Sonsie One
Inclusive Sans
Milonga
Single Day
Lexend Mega
Playwrite NZ Guides
Playwrite US Trad Guides
Liu Jian Mao Cao
Chau Philomene One
Passions Conflict
Srisakdi
Comme
Solitreo
Port Lligat Slab
Noto Sans Oriya
Ranchers
Qahiri
Noto Music
Mate SC
Koh Santepheap
Playwrite US Trad
Engagement
Anek Tamil
Devonshire
Trispace
Anek Kannada
Mynerve
IBM Plex Sans Thai Looped
Playwrite CZ
Junge
Beau Rivage
BIZ UDMincho
Sirin Stencil
Meera Inimai
Noto Sans Ethiopic
BBH Sans Hegarty
Sura
Bruno Ace
Anek Gujarati
Jersey 15
My Soul
Rubik Scribble
Reem Kufi Fun
Dorsa
Island Moments
Winky Sans
Gideon Roman
Hubot Sans
Londrina Shadow
Fasthand
Noto Sans Sora Sompeng
Faculty Glyphic
Luxurious Script
Noto Sans Gurmukhi
Smooch
Carrois Gothic SC
Fascinate Inline
Handjet
New Amsterdam
Zen Tokyo Zoo
Jacquard 12
Chocolate Classical Sans
Noto Sans Gothic
Noto Serif Tamil
Autour One
Almendra SC
Joan
Erica One
Shippori Antique B1
Tac One
Spline Sans Mono
Noto Sans Symbols 2
Comforter
Noto Sans Buhid
Almendra Display
Girassol
Dekko
Braah One
Playwrite DE Grund
Offside
Ysabeau
Seymour One
Romanesco
Jacques Francois Shadow
Kaisei HarunoUmi
Tilt Prism
Jacques Francois
Mea Culpa
Content
Stoke
Noto Sans Tagalog
Edu NSW ACT Cursive
Darumadrop One
Simonetta
Buda
Playwrite IS
Noto Serif Kannada
Paprika
Bonheur Royale
Text Me One
Ramaraja
Smokum
Gidugu
Kapakana
Chiron GoRound TC
Tillana
Stint Ultra Condensed
Ysabeau Infant
Ribeye Marrow
Noto Sans Lao
Risque
Ballet
Linden Hill
Plaster
Bodoni Moda SC
Farsan
Noto Serif Ahom
Cagliostro
Sedan SC
Bilbo
Stack Sans Text
Twinkle Star
Asta Sans
Alumni Sans Pinstripe
Averia Gruesa Libre
Caramel
Kite One
Tiro Devanagari Sanskrit
Peddana
Glass Antiqua
Victor Mono
Montserrat Underline
Trykker
Edu AU VIC WA NT Hand
Anek Odia
Lexend Tera
Arbutus
Ewert
Castoro Titling
Zalando Sans
Marhey
Bagel Fat One
Chela One
Condiment
Beiruti
Liter
Yeon Sung
Ruluko
Joti One
Water Brush
Playwrite VN Guides
Ruwudu
Noto Sans Osmanya
Bruno Ace SC
Donegal One
Hedvig Letters Sans
New Tegomin
Libre Barcode EAN13 Text
Chathura
Noto Sans Tai Viet
Alan Sans
Lancelot
Marko One
Kumar One
Inika
Sahitya
Noto Serif Lao
Yaldevi
Anek Gurmukhi
Libre Barcode 39 Extended
Galindo
Siemreap
Kotta One
Elsie Swash Caps
Stint Ultra Expanded
Stack Sans Headline
Butcherman
Nuosu SIL
Yuji Boku
Momo Trust Display
Uchen
IBM Plex Sans Devanagari
Tiro Devanagari Marathi
Micro 5
Bubbler One
Manufacturing Consent
Stalinist One
Bungee Hairline
Baskervville SC
Chilanka
Londrina Sketch
Geostar Fill
Blaka
Noto Sans Syloti Nagri
Poor Story
Preahvihear
Odor Mean Chey
LXGW WenKai TC
Encode Sans SC
Lakki Reddy
Ojuju
Hubballi
Amiri Quran
Playwrite AU NSW
Griffy
Alumni Sans Collegiate One
Grey Qo
Galdeano
Flow Rounded
Wittgenstein
Dhurjati
Jersey 20
Gasoek One
Cactus Classical Serif
Reddit Mono
Nata Sans
Felipa
Bacasime Antique
Luxurious Roman
Triodion
Playwrite AU QLD
Port Lligat Sans
Fruktur
Playwrite AU SA
Noto Serif Telugu
Arsenal SC
Lugrasimo
Bitcount Grid Double
Sixtyfour
Purple Purse
Ranga
Revalia
Playwrite PL
Finlandica
Tulpen One
Federant
Praise
Rubik Vinyl
Updock
Grechen Fuemen
Rubik Iso
Passero One
Jacquard 24
Monomakh
Explora
Rubik Distressed
Mozilla Text
Rubik Glitch Pop
Ravi Prakash
Orbit
Edu VIC WA NT Beginner
Bungee Outline
Ponnala
Dr Sugiyama
Reem Kufi Ink
Oi
Tiro Kannada
Hanalei Fill
Mr Bedfort
Bahiana
Aref Ruqaa Ink
Fleur De Leah
Stack Sans Notch
Moderustic
Noto Serif Gujarati
Rubik 80s Fade
Playwrite IN
Wellfleet
Noto Sans Samaritan
Jim Nightshade
Big Shoulders Stencil
Neonderthaw
Noto Sans Anatolian Hieroglyphs
Playpen Sans Arabic
Inspiration
Kumar One Outline
Kirang Haerang
Ponomar
Mrs Sheppards
Ole
Diplomata SC
Trochut
Are You Serious
Babylonica
Princess Sofia
Langar
Epunda Sans
Chiron Sung HK
Snippet
Elms Sans
Oldenburg
Konkhmer Sleokchher
Noto Serif Sinhala
M PLUS Code Latin
Noto Serif Armenian
Miss Fajardose
Playwrite US Modern
Rubik Burned
BBH Sans Bogle
Bonbon
Alumni Sans Inline One
GFS Neohellenic
Dai Banna SIL
Edu AU VIC WA NT Dots
Jacquarda Bastarda 9
Edu AU VIC WA NT Pre
Kings
Bigelow Rules
Noto Serif Khmer
Noto Serif Balinese
BioRhyme Expanded
Tsukimi Rounded
National Park
Tiro Telugu
Zalando Sans Expanded
Molle
Tiro Tamil
Emblema One
Send Flowers
TASA Explorer
Diphylleia
Chenla
Flavors
Huninn
Ancizar Sans
Foldit
Love Light
WDXL Lubrifont JP N
Rubik Gemstones
LXGW WenKai Mono TC
Winky Rough
Chiron Hei HK
Noto Sans Cypro Minoan
Edu NSW ACT Foundation
Cascadia Code
TASA Orbiter
Bahianita
Noto Sans Javanese
Labrada
Libertinus Sans
Momo Signature
Jaini
Noto Serif Vithkuqi
Estonia
Rubik Microbe
Sedan
Lunasima
Diplomata
Ancizar Serif
Nabla
Iansui
Noto Rashi Hebrew
Agu Display
Butterfly Kids
Tiro Gurmukhi
Bitcount Grid Single
Story Script
SUSE Mono
Playwrite BE VLG
Sirivennela
Noto Sans Duployan
Splash
Rubik Puddles
Aubrey
Atkinson Hyperlegible Mono
Noto Serif Tibetan
Playwrite DE SAS
Cascadia Mono
Noto Sans Batak
Mingzat
Matemasie
Tapestry
Chokokutai
Workbench
Noto Sans Adlam
Tai Heritage Pro
Annapurna SIL
Zen Loop
Noto Sans Hanunoo
Suravaram
Cherish
Noto Serif Tangut
Sassy Frass
Playwrite MX Guides
Noto Sans Coptic
Combo
Rubik Spray Paint
Protest Guerrilla
Playwrite GB S
Alumni Sans SC
Edu QLD Beginner
Momo Trust Sans
Rubik Beastly
Ruge Boogie
Noto Sans Osage
Phetsarath
Ubuntu Sans Mono
Sixtyfour Convergence
Moulpali
Geostar
Noto Sans Carian
Libertinus Serif
Gidole
Taprom
Mozilla Headline
Karla Tamil Upright
Rubik Marker Hatch
Libertinus Mono
Black And White Picture
Noto Sans Glagolitic
Noto Sans Tangsa
Danfo
Slackside One
BBH Sans Bartle
Rock 3D
Syne Tactile
Kalnia Glaze
Redacted Script
Flow Block
Kolker Brush
Hind Mysuru
Noto Traditional Nushu
Playwrite DK Loopet
Moo Lah Lah
Parastoo
Shizuru
Noto Serif Ethiopic
Cossette Titre
Snowburst One
Petemoss
Noto Sans Nandinagari
Playwrite ZA
Noto Sans Takri
Rubik Doodle Triangles
Gajraj One
Playwrite HR
Noto Serif Khitan Small Script
Playwrite IT Moderna
Noto Sans Multani
Playwrite HR Lijeva
Noto Sans Cherokee
Palette Mosaic
WDXL Lubrifont TC
Noto Sans Shavian
Vibes
Playwrite ES
Intel One Mono
UoqMunThenKhung
Edu AU VIC WA NT Guides
Moirai One
Noto Sans Old Italic
Yuji Hentaigana Akari
Grandiflora One
Tagesschrift
Noto Sans Yi
Puppies Play
Noto Sans Cham
LXGW Marker Gothic
Playwrite MX
Noto Sans Old Hungarian
Noto Serif Yezidi
Playwrite CA
Rubik Maze
Noto Sans Nag Mundari
Hanalei
WDXL Lubrifont SC
Noto Sans Thaana
Menbere
Rubik Broken Fax
Lisu Bosa
Noto Sans Avestan
Noto Sans Syriac Eastern
Asimovian
Epunda Slab
Edu SA Hand
Playwrite NL
Ingrid Darling
Noto Sans Syriac Western
Noto Sans Mongolian
Rubik Pixels
Playwrite AU TAS
Coral Pixels
Libertinus Math
Linefont
Playwrite BE WAL
Noto Serif Toto
Playpen Sans Thai
Rubik Maps
Noto Serif Dogra
Edu AU VIC WA NT Arrows
Noto Sans Linear A
Savate
Playwrite AR
Playwrite NZ
Bitcount
Matangi
Noto Serif NP Hmong
Noto Sans Vithkuqi
Noto Sans Palmyrene
Noto Sans Adlam Unjoined
Noto Sans Bamum
Warnes
Noto Sans Zanabazar Square
Playwrite CO
Noto Serif Myanmar
Playwrite DK Uloopet
Playwrite NO
Noto Sans Indic Siyaq Numbers
Noto Sans Imperial Aramaic
Noto Sans Egyptian Hieroglyphs
Shafarik
Playwrite VN
Playwrite PT
Jacquard 12 Charted
Bytesized
Playwrite NG Modern
Noto Serif Gurmukhi
Noto Sans Newa
Noto Sans Balinese
Noto Sans Tai Le
Blaka Hollow
Badeen Display
Tirra
Bitcount Prop Single Ink
Noto Sans Medefaidrin
Exile
Playwrite FR Moderne
Libertinus Serif Display
Karla Tamil Inclined
Noto Sans Inscriptional Pahlavi
Noto Sans Elbasan
Playpen Sans Deva
Noto Sans Old Persian
Playwrite PE
Tuffy
Noto Sans Khojki
Noto Sans Mro
Noto Serif Old Uyghur
Noto Serif Ottoman Siyaq
Noto Serif Oriya
Playwrite DE LA
Blaka Ink
Jersey 20 Charted
Playwrite AU VIC
Noto Sans Wancho
Noto Sans Sundanese
Noto Sans Mahajani
Noto Sans Grantha
Noto Sans Sharada
Playwrite ES Deco
Big Shoulders Inline
Bitcount Prop Double Ink
Namdhinggo
Playpen Sans Hebrew
Jaini Purva
Noto Serif Grantha
Edu QLD Hand
Playwrite GB J
Noto Znamenny Musical Notation
Playwrite RO
Noto Serif Hentaigana
Padyakke Expanded One
Noto Sans Tifinagh
Bitcount Prop Single
Playwrite CL
Noto Sans Miao
Narnoor
Noto Sans Lisu
Noto Sans Tai Tham
Maname
Libertinus Keyboard
Rubik Storm
Edu VIC WA NT Hand Pre
Noto Sans New Tai Lue
Noto Serif Todhri
Edu NSW ACT Hand Pre
Sankofa Display
Noto Sans Old North Arabian
Noto Sans Bhaiksuki
Noto Sans PhagsPa
Noto Sans Brahmi
Wavefont
Noto Sans Tagbanwa
Playwrite AT
Kay Pho Du
Noto Sans Marchen
Edu VIC WA NT Hand
Noto Sans NKo Unjoined
Noto Sans Vai
Noto Sans Gunjala Gondi
Bitcount Single
Playwrite CO Guides
Bitcount Single Ink
Noto Sans Ol Chiki
Bitcount Grid Single Ink
Bitcount Ink
Noto Sans Old Turkic
Rubik Lines
Noto Sans Cuneiform
Noto Sans Buginese
Playwrite DE Grund Guides
Jersey 25 Charted
Noto Sans Sogdian
Noto Sans NKo
Jersey 15 Charted
Micro 5 Charted
Noto Sans Deseret
Noto Serif Makasar
Noto Sans Chakma
Noto Sans Rejang
Noto Sans Runic
Jacquard 24 Charted
Noto Sans Pahawh Hmong
Noto Sans Cypriot
Cossette Texte
Noto Sans Old Permic
Playwrite GB J Guides
Playwrite SK
Playwrite IE
Noto Sans Inscriptional Parthian
Noto Sans Nabataean
Noto Sans Hanifi Rohingya
Kanchenjunga
Noto Sans Lydian
Noto Sans Mayan Numerals
Noto Sans Linear B
Noto Sans Kaithi
Bitcount Grid Double Ink
Playwrite TZ
Pochaevsk
Playwrite DE VA
Noto Sans Meroitic
Noto Sans Psalter Pahlavi
Noto Sans Kawi
Jersey 10 Charted
Playwrite AU SA Guides
Bitcount Prop Double
Playwrite AT Guides
Noto Sans Old South Arabian
Playwrite HU Guides
Playwrite NG Modern Guides
Playwrite AU QLD Guides
Yuji Hentaigana Akebono
Yarndings 12
Playwrite HR Guides
Playwrite CA Guides
Playwrite RO Guides
Noto Sans Sunuwar
Playwrite IS Guides
Playwrite CZ Guides
Noto Sans Mandaic
Noto Sans SignWriting
Noto Sans Caucasian Albanian
Noto Sans Elymaic
Noto Sans Bassa Vah
Noto Sans Kayah Li
Noto Sans Chorasmian
Noto Sans Khudawadi
Playwrite BR
Noto Sans Hatran
Noto Serif Dives Akuru
Playwrite PL Guides
Playwrite IT Trad
Playwrite PE Guides
Noto Sans Saurashtra
Jacquarda Bastarda 9 Charted
Noto Sans Pau Cin Hau
Yarndings 20
Playwrite PT Guides
Noto Sans Limbu
Noto Sans Ugaritic
Noto Sans Tirhuta
Noto Sans Modi
Noto Sans Phoenician
Noto Sans Tamil Supplement
Noto Sans Soyombo
Noto Sans Nushu
Playwrite ID
Playwrite NL Guides
Playwrite FR Trad
Noto Sans Masaram Gondi
Noto Sans Lepcha
Noto Sans Manichaean
Playwrite BE WAL Guides
Noto Sans Old Sogdian
Noto Sans Mende Kikakui
Noto Sans Ogham
Yarndings 12 Charted
Noto Sans Kharoshthi
Playwrite IE Guides
Yarndings 20 Charted
Noto Sans Lycian
Playwrite TZ Guides
Playwrite HR Lijeva Guides
Playwrite AU VIC Guides
Playwrite ES Guides
Noto Sans Siddham
Playwrite IN Guides
Playwrite ES Deco Guides
Playwrite GB S Guides
Playwrite DE VA Guides
Playwrite US Modern Guides
Playwrite ZA Guides
Playwrite FR Moderne Guides
Playwrite IT Moderna Guides
Playwrite IT Trad Guides
Playwrite FR Trad Guides
Playwrite BR Guides
Playwrite CU Guides
Playwrite ID Guides
Playwrite AR Guides
Playwrite DE LA Guides
Playwrite CL Guides
Playwrite DK Loopet Guides
Playwrite DK Uloopet Guides
Playwrite BE VLG Guides
Playwrite AU TAS Guides
Playwrite AU NSW Guides
Playwrite SK Guides
Playwrite NO Guides
Playwrite DE SAS Guides
点击查看代码
vue
<script setup>
import { ref } from "vue";
import GoogleFontPicker from "./GoogleFontPicker.vue";
const number = ref(114514);
function switchNumber() {
number.value = Math.floor(Math.random() * 1000000);
}
const italic = ref(false);
const fontSize = ref(64);
const color = ref(
"#" +
Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, "0")
);
const fontFamily = ref("");
</script>
<template>
<div class="text-center">
<vue-to-counter-number
:value="number"
:color="color"
locale-number
:style="{
fontSize: fontSize + 'px',
lineHeight: 1.2,
fontStyle: italic ? 'italic' : 'normal',
fontFamily: fontFamily,
}"
/>
</div>
<hr />
<div class="flex gap-4">
<input class="border border-solid p-1" v-model="number" type="number" />
<button class="border border-solid p-1" @click="switchNumber">切换</button>
<span class="flex-auto" />
<input class="border border-solid p-1" v-model="color" type="color" />
</div>
<div class="flex gap-4 mt-4">
<label class="inline-flex gap-1 border border-solid p-1">
斜体
<input v-model="italic" type="checkbox" />
</label>
<label class="inline-flex gap-1 border border-solid p-1">
字号
<input v-model="fontSize" type="range" min="1" max="128" />
{{ fontSize }}px
</label>
</div>
<div class="flex gap-4 mt-4">
<google-font-picker v-model="fontFamily" />
</div>
</template>
<style scoped></style>vue
<script setup>
import { ref, onMounted, watch, computed } from "vue";
const fonts = ref([]);
const searchQuery = ref("");
const selectedFont = defineModel("modelValue");
const fetchFonts = async () => {
try {
const response = await fetch(
"https://www.googleapis.com/webfonts/v1/webfonts?" +
new URLSearchParams({
key: "AIzaSyBJPgjEPn1iDes5wLzDF-JMEst6QdR4skU",
capability: "WOFF2",
sort: "popularity",
}).toString()
); // Replace with your Google Fonts API key
const data = await response.json();
fonts.value = data.items;
} catch (error) {
console.error("Error fetching fonts:", error);
}
};
const filteredFonts = computed(() => {
if (!searchQuery.value) {
return fonts.value;
}
return fonts.value.filter((font) =>
font.family.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
const loadFont = (fontName) => {
const link = document.createElement("link");
link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, "+")}&display=swap`;
link.rel = "stylesheet";
document.head.appendChild(link);
};
watch(selectedFont, (newFont) => {
if (newFont) {
loadFont(newFont);
}
});
onMounted(async () => {
await fetchFonts();
selectedFont.value = "Ingrid Darling";
// await nextTick();
// document
// .querySelector(`#${selectedFont.value.replaceAll(" ", "-")}`)
// ?.scrollIntoView();
});
// 自动加载选择框中可见字体的预览menu字体
watch(
filteredFonts,
(newFonts) => {
newFonts.forEach((font) => {
const previewFamily = joinPreviewFamily(font.family);
const fontFace = new FontFace(previewFamily, `url(${font.menu})`, {
display: "swap",
});
document.fonts.add(fontFace);
});
},
{ immediate: true }
);
function joinPreviewFamily(family) {
return [...family.split(" "), "PREVIEW"].join("-");
}
</script>
<template>
<div class="flex-none flex flex-col">
<input
type="text"
v-model="searchQuery"
placeholder="Search for fonts"
class="w-full border border-solid p-1 self-start"
/>
<a
href="https://developers.google.com/fonts"
target="_blank"
class="mt-1 text-xs"
>
Data provided by Google Fonts API
</a>
</div>
<div
class="flex-auto font-list-container border border-solid p-1 overflow-y-scroll h-64"
>
<div
v-for="font in filteredFonts"
:key="font.family"
:id="font.family.replace(' ', '-')"
:style="{ fontFamily: joinPreviewFamily(font.family) }"
class="font-item p-2 cursor-pointer"
:class="{
'bg-gray-200': selectedFont === font.family,
}"
@click="selectedFont = font.family"
>
{{ font.family }}
</div>
</div>
</template>
<style scoped>
.font-list-container {
max-height: 16rem;
}
.font-item:hover {
background-color: #f0f0f0;
}
</style>vue
<script setup>
import StackblitzLogo from "../assets/stackblitz-logo.svg";
import { ref, toRefs } from "vue";
import { getCodeStackblitzParams } from "./generate-stackblitz-params";
import sdk from "@stackblitz/sdk";
import packageInfo from "../../vue-to-counter/package.json";
const props = defineProps({
title: {
type: String,
required: true,
},
});
const { title } = toRefs(props);
const containerRef = ref();
function handleStackblitz() {
if (!containerRef.value) return;
const tabs = containerRef.value.querySelectorAll(".tabs > label");
const blocks = containerRef.value.querySelectorAll(".blocks > div code");
if (tabs.length !== blocks.length) {
window.alert("The number of tabs and code blocks should be the same.");
return;
}
const files = Array.from(tabs).map((tab, index) => ({
filename: tab.textContent.trim(),
content: blocks[index].textContent,
}));
const params = getCodeStackblitzParams(files, {
title: `${title.value} - vue-to-counter@${packageInfo.version}`,
});
sdk.openProject(params, {
openFile: "src/demo.vue",
});
}
</script>
<template>
<div ref="containerRef" class="demo-container">
<div class="flex relative">
<span class="flex-auto" />
<span
title="Open In Stackblitz"
class="inline-block p-1 cursor-pointer hover:outline hover:outline-[#1389FD] outline-1"
@click="handleStackblitz"
>
<img
class="h-4 w-4 pointer-events-none"
:src="StackblitzLogo"
alt="CodeSandbox Logo"
/>
</span>
</div>
<hr />
<slot />
</div>
</template>
<style lang="scss">
.demo-container {
@apply flex flex-col justify-center border p-4 rounded-lg mt-4 text-sm;
.vue-to-counter {
@apply font-mono text-4xl;
}
.custom-block {
@apply m-0;
}
}
</style>