TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Bad Apple Font

177 点作者 notmysql_超过 1 年前

17 条评论

interroboink超过 1 年前
I thought somehow the animation was playing "by itself," but I guess it was accomplished by holding down the '.' key? The font code swaps a run of N dots with the glyph corresponding to the Nth frame of animation.
评论 #37322497 未加载
评论 #37319346 未加载
评论 #37320784 未加载
triclops200超过 1 年前
Obviously the thought comes up of the fact that this feels unsafe to have WASM in font files, but, I'm also aware that font layout engines are already turing complete, which leads me to wonder: have there been any high profile malware font examples? That entire stack feels a lot like an attack surface to me, especially given stuff like the fact that windows used to render fonts in the kernel layer.
评论 #37317710 未加载
评论 #37317324 未加载
评论 #37318795 未加载
评论 #37317363 未加载
评论 #37320650 未加载
评论 #37317367 未加载
jansan超过 1 年前
The blog post talks a lot about how he got the frames into the font, but very little about how the animation works.<p>AFAICT this is how it is done (edit: I am wrong, it uses Wasm):<p>- The frames of the video are simply stored as glyphs in the font<p>- There is a ligature mapping for sequences of dots to glyphs (for example &quot;.&quot; is mapped to glyph 1, &quot;..&quot; is mapped to glyph 2, &quot;...&quot; is mapped to glyph 3, etc.<p>- If you use the font in an editable part of the browser and hold the &quot;.&quot; key pressed, dots get added by autorepeat and a growing a sequence of dots is inserted. This sequence of dots is converted by the font&#x27;s ligature mapping to different animation frame glyphs, thus showing the animation.<p>I have no idea why WASM and HarfBuzz are needed (it should work in any modern browser without them), but it looks like a fun little experiment.
评论 #37318391 未加载
Bu9818超过 1 年前
This reminds me of a torrent on Nyaa that implemented Bad Apple!! in ASS subtitles by retracing the frames into SVG (seems to be better quality than simply using potrace by itself), converting the SVGs into ASS Dialogue events, and muxing it into a Matroska container with a placeholder video. Therefore the &quot;video&quot; window can be resized without rescaling raster images (and it actually runs well on most hardware and players, unlike his other torrents putting whole anime episodes in subtitles). The subtitle attachment could also be extracted from the container and executed as a valid shell script which would run mpv or ffplay, use the respective options to create a libavfilter filter to create a blank video (to overlay the subtitles on), use its own filename for subtitles, and play the song by decoding and piping a base64 string at the bottom of the script to mpv&#x2F;ffmpeg&#x27;s stdin.
thaliaarchi超过 1 年前
The post also links to some examples of using Wasm to solve complex typographical problems, which I found interesting.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;harfbuzz&#x2F;harfbuzz-wasm-examples">https:&#x2F;&#x2F;github.com&#x2F;harfbuzz&#x2F;harfbuzz-wasm-examples</a>
gpvos超过 1 年前
Okay, now you have the frames as glyphs in the font, but how are they going to animate? The most interesting part of the explanation is missing.
评论 #37319085 未加载
评论 #37318998 未加载
评论 #37318909 未加载
skrebbel超过 1 年前
Stupid question: Is this an entire blog post about an animated font without showing the animation in action, or does it simply not work on my device? (iOS 15) I’m not sure where to look.
评论 #37318817 未加载
评论 #37321792 未加载
评论 #37320633 未加载
yankput超过 1 年前
I don’t understand the WASM part at all and I feel dumb<p>How can WASM be in font? Font is a font, not WASM file. It’s a different format
评论 #37321906 未加载
评论 #37321285 未加载
Eiim超过 1 年前
Hey, I&#x27;m the person who made SmilApple (typo&#x27;d here as SmllApple)! Super great to see my quick and dirty project used like this, I just wish I&#x27;d thought of it first<p><a href="https:&#x2F;&#x2F;github.com&#x2F;Eiim&#x2F;SmilApple">https:&#x2F;&#x2F;github.com&#x2F;Eiim&#x2F;SmilApple</a>
robotnikman超过 1 年前
I always love a reference to Bad Apple
评论 #37318202 未加载
评论 #37317878 未加载
评论 #37320716 未加载
weinzierl超过 1 年前
Cool idea. Something very similar is possible without WASM in the font renderer. I remember a font that displayed its own size, so it changed zooming in and out. I think you could adapt that to play a short animation.
VikingCoder超过 1 年前
In the future, we have given up on fonts and unicode...<p>All communication will be through sequences of SVG images and animations.
评论 #37325348 未加载
LeanderK超过 1 年前
A bit offtopic: In principle I like the design of the bloc, but I recently searched for a technical-looking font that is not monospaced. I like the design of the blog, but reading prose in monospaced font is just not very pleasant I think. All (freely available) coding I found fonts only have monospaced variants and all non-monospaced fonts didn&#x27;t look like coding fonts. Any ideas?
评论 #37320074 未加载
评论 #37326421 未加载
评论 #37319860 未加载
danielvaughn超过 1 年前
Stuff like this does get me excited, as a web developer who&#x27;s always wanted to explore graphics but never really dipped into native development.<p>On the other hand, I know enough to know that Chromium uses Harfbuzz and Skia to render a webpage that, in itself, is going to use another instance of Harfbuzz and Skia to render into a canvas element. Intuitively, it feels dirty.
varispeed超过 1 年前
Now how can you print this so it stays animated on the paper sheet?
aurelien超过 1 年前
You can also speak of their bad | in terminal
snvzz超过 1 年前
It shows how current font rendering systems have accumulated quite a bit of bloat.<p>This makes me nostalgic for bitmap fonts.
评论 #37318054 未加载
评论 #37319304 未加载
评论 #37317993 未加载