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