1 回答

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊
通過將字體大小范圍與字?jǐn)?shù)范圍進(jìn)行比較,可以改變字體大小。
想象一下您有一個(gè)單詞列表及其計(jì)數(shù):
const words = [
? { text: "apples", count: 10 },
? { text: "pears", count: 30 },
? // ...
]
的范圍font-size可以計(jì)算:
const minFontSize = 10
const maxFontSize = 30
// delta between sizes
const fontRange = maxFontSize - minFontSize
然后計(jì)算最小字?jǐn)?shù)、最大字?jǐn)?shù)和字?jǐn)?shù)范圍。響應(yīng)式語句對(duì)此很有效:
// list of counts
$: counts = words.map(record => record.count)
// minimum word count
$: min = Math.min(...counts)
// maximum word count
$: max = Math.max(...counts)
// delta between smallest and largest word count
$: countRange = max - min
現(xiàn)在我們可以計(jì)算字體大?。?/p>
minFontSize + (deltaWordCount * sizeRatio)
或者更具體地說:
{#each words as word}
? <span style="font-size: {minFontSize + ((word.count - min) * (fontRange / countRange))}px">
? ? {word.text}
? </span>
{/each}
添加回答
舉報(bào)