| 1 |
export const fontFamilyLong = (family: string) => { |
| 2 |
if (!family) return; |
| 3 |
return [ |
| 4 |
family.split('.')[0], |
| 5 |
'ui-monospace', |
| 6 |
'SFMono-Regular', |
| 7 |
'Menlo', |
| 8 |
'Monaco', |
| 9 |
'Consolas', |
| 10 |
'monospace', |
| 11 |
].join(','); |
| 12 |
}; |
| 13 |
|
| 14 |
export const maybeClamp = (size: string, clampFonts: boolean) => { |
| 15 |
if (!size) return; |
| 16 |
if (!clampFonts) return size; |
| 17 |
if (!parseFloat(size)) return size; |
| 18 |
return `clamp(${parseFloat(size) * 16}px, ${size}, ${ |
| 19 |
parseFloat(size) * 24 |
| 20 |
}px)`; |
| 21 |
}; |
| 22 |
|
| 23 |
export const getTextWidth = (text: string, font?: string) => { |
| 24 |
const canvas = document.createElement('canvas'); |
| 25 |
const context = canvas.getContext('2d'); |
| 26 |
if (!context) return 0; |
| 27 |
context.font = font || getComputedStyle(document.body).font; |
| 28 |
return context.measureText(text).width; |
| 29 |
}; |
| 30 |
|
