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