正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

when animating variable font weights remember to include tighter optical sizing to maintain the width of the text

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

12,619 subscribers

169,272 次观看 • 4 个月前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Devon Govett

48,276 次观看 • 6 个月前

There have been many versions of the Zelda logo over the years, with varying proportions. So here's a proof of concept for a variable font with weight and width controls. My working name is "Hylia Serif DX."

Curioglyphic

360,138 次观看 • 3 年前

woke up last night to write down this idea for a fluid navigation bar thing that uses variable font width and weight to signify selection state. it feels very fun to play with and squish around

woke up last night to write down this idea for a fluid navigation bar thing that uses variable font width and weight to signify selection state. it feels very fun to play with and squish around

sam henri gold

108,321 次观看 • 1 年前

“When you start to treat the light weights like heavy weights, the heavy weights will go up a lot easier” - Ed Coan

“When you start to treat the light weights like heavy weights, the heavy weights will go up a lot easier” - Ed Coan

Squat University

40,056 次观看 • 7 个月前

animating weight... i love variable fonts

animating weight... i love variable fonts

daniel petho

89,523 次观看 • 1 年前

One of my first obsessions with AI was portals. I remember when MJ v5 was released, I generated around 5000 different portals, dreaming of one day animating them. Today, a 'simple' text-to-video prompt can do this... How amazing is this? PROMPT 👇

One of my first obsessions with AI was portals. I remember when MJ v5 was released, I generated around 5000 different portals, dreaming of one day animating them. Today, a 'simple' text-to-video prompt can do this... How amazing is this? PROMPT 👇

Alex Patrascu

46,915 次观看 • 11 个月前

#Throwback to the good old days when #TaylorSwift explained Omitted Variable Bias to an audience of non-economists 🙃 #Swifties #EconSwifties

#Throwback to the good old days when #TaylorSwift explained Omitted Variable Bias to an audience of non-economists 🙃 #Swifties #EconSwifties

Alexis H. Villacis

73,557 次观看 • 1 年前

Zooming in to check the weight of the weights

Zooming in to check the weight of the weights

The Best Viral Vids🔥

62,722 次观看 • 8 个月前

Path segmentation and interpolation, and variable stroke width in Redraw

Path segmentation and interpolation, and variable stroke width in Redraw

William Candillon

11,588 次观看 • 3 个月前

#ur_ärt 1 million views of Idol Cover🎉 I remember animating U-san for the first time when this cover song was uploaded😌

#ur_ärt 1 million views of Idol Cover🎉 I remember animating U-san for the first time when this cover song was uploaded😌

MV_무비

12,800 次观看 • 1 年前

To move the position of the bird, I mapped the bottom padding of an Auto Layout frame to the 'yPosition' variable.

To move the position of the bird, I mapped the bottom padding of an Auto Layout frame to the 'yPosition' variable.

Dave Williames

22,838 次观看 • 3 年前

there are two ways to make inline icons match text: guess a px value or use the font’s cap height `1cap` gives you the second one. it sizes the icon from the height of capital letters, so it keeps matching when font-size changes.

there are two ways to make inline icons match text: guess a px value or use the font’s cap height `1cap` gives you the second one. it sizes the icon from the height of capital letters, so it keeps matching when font-size changes.

Tanvir

48,327 次观看 • 4 个月前

#MeghanMarkle says she “hasn’t scraped the surface” of her experiences in the Royal Family. Remember when Gayle King and Janina Gavankar said Meghan has documents and text to prove everything?????? What is about to drop???? #MeghanIsTheProblem #MeghanMarkIeisaLiar #FOMeghan

#MeghanMarkle says she “hasn’t scraped the surface” of her experiences in the Royal Family. Remember when Gayle King and Janina Gavankar said Meghan has documents and text to prove everything?????? What is about to drop???? #MeghanIsTheProblem #MeghanMarkIeisaLiar #FOMeghan

Stephanie Sidley

258,086 次观看 • 2 年前

We’re back in the Grump’s space! Animating once again for the 10 Minute Power Hour🥹🦖🦕 We had so much fun going through some of the old callbacks to previous episodes to include in the brand new introduction. Can you find all the props we used? Game Grumps

ApartmentD

22,989 次观看 • 8 个月前

the codex team at OpenAI Developers Can we reduce the min width of the codex window? when I try to place 2 windows side by side, they never align.

the codex team at OpenAI Developers Can we reduce the min width of the codex window? when I try to place 2 windows side by side, they never align.

Dhruvin

13,374 次观看 • 6 个月前

Finally got variable width working in procedural rivers using a world space post process so they feel less roadlike. I'm thinking it would be good to add wider = slower and thinner = faster, and maybe increase the depth of the carving in thinner sections? iPad Pro (2020).

Finally got variable width working in procedural rivers using a world space post process so they feel less roadlike. I'm thinking it would be good to add wider = slower and thinner = faster, and maybe increase the depth of the carving in thinner sections? iPad Pro (2020).

Protopop Games

22,578 次观看 • 1 年前

When the GC asks if the talking stage responded to the triple text

When the GC asks if the talking stage responded to the triple text

Mariam

103,154 次观看 • 2 个月前