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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

CSS Sans – A font created in CSS

180 点作者 lumannnn大约 7 年前

18 条评论

nickreese大约 7 年前
This would be incredible for some privacy applications if you wrote a wrapper on top of it to obfuscate the class names. Clearly visible to users, very difficult for bots to pick up without clearly looking for it.
评论 #16822030 未加载
评论 #16821414 未加载
IMTDb大约 7 年前
I am somehow disappointed that all the text on the website is not displayed using the font itself :p
评论 #16823844 未加载
_sdegutis大约 7 年前
Pretty darn cool! One limitation I wish I could think of a workaround for is that "cutting out" parts of some letters (C, G, J, Q) requires laying a rotated white square over it, with white as the hardcoded background color. So this will only work with other background colors if you know the background color ahead of time or can configure it in JS or something.
评论 #16825488 未加载
actionscripted大约 7 年前
This is awesome. Not everything built needs to be held to best practices and these sorts of projects are what make the web exciting!<p>I know I&#x27;m on HN but everyone responding is taking a tone like the creator said, &quot;this is the best way to do it and everyone should use this in production&quot; while on the page it only says they built it because they could -- because CSS has evolved to support it.
svat大约 7 年前
Probably useless for any applications, but this is really cool! The page with the definitions of all characters A–Z is here: <a href="https:&#x2F;&#x2F;yusugomori.com&#x2F;projects&#x2F;css-sans&#x2F;fonts" rel="nofollow">https:&#x2F;&#x2F;yusugomori.com&#x2F;projects&#x2F;css-sans&#x2F;fonts</a> It&#x27;s interactive, so you can actually see how the definition (CSS code) of each character corresponds to the actual shape seen.<p>Something like this (but with different primitives, not CSS) is how Donald Knuth made the program Metafont, using which he created Computer Modern in all its variants (the font used by default by every TeX&#x2F;LaTeX document). His intent was to capture the “idea” of each letter shape (glyph in the font), by writing a program for drawing that letter, instead of simply drawing it. He came up with something vaguely similar (pens of varying thickness, erasers, etc). The program is described in Volume C of <i>Computers and Typesetting</i> (<i>The METAFONTbook</i>), and Volume E is a thick hardcover book somewhat like this page, which gives the definition of (program for) each character next to a picture of its shape.<p>More Metafont-related links, if anyone finds this sort of thing inspiring:<p>- <a href="https:&#x2F;&#x2F;s3-us-west-2.amazonaws.com&#x2F;visiblelanguage&#x2F;pdf&#x2F;16.1&#x2F;the-concept-of-a-meta-font.pdf" rel="nofollow">https:&#x2F;&#x2F;s3-us-west-2.amazonaws.com&#x2F;visiblelanguage&#x2F;pdf&#x2F;16.1&#x2F;...</a> (this paper is a work of art!)<p>- <a href="https:&#x2F;&#x2F;www.metaflop.com&#x2F;modulator" rel="nofollow">https:&#x2F;&#x2F;www.metaflop.com&#x2F;modulator</a> (use the sliders)<p>- <a href="https:&#x2F;&#x2F;tex.stackexchange.com&#x2F;a&#x2F;423720&#x2F;48" rel="nofollow">https:&#x2F;&#x2F;tex.stackexchange.com&#x2F;a&#x2F;423720&#x2F;48</a><p>Metafont may not have had the right primitives for character drawing, and CSS obviously doesn&#x27;t (it&#x27;s not what it&#x27;s designed for), but the idea of <i>describing</i> shapes is very interesting, and I still hope (despite decades of “failure”) that it can catch on. Maybe with interactive input and immediate visual feedback, it would be more appealing, at least for some people.
评论 #16823990 未加载
评论 #16821971 未加载
purplecones大约 7 年前
Awesome. I love that you have a section showing exactly what CSS properties are used to create each letter.
评论 #16823947 未加载
评论 #16822318 未加载
dang大约 7 年前
Discussed in 2015: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9204111" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9204111</a>
crispyporkbites大约 7 年前
How outrageous, this site does not work with CSS disabled.
RubenSandwich大约 7 年前
How do these handle kerning? I&#x27;m guessing they are monospaced? Looking on the page I can&#x27;t find any of the CSS Sans used in a sentence.<p>Edit: Found a demo page[1], it&#x27;s monospaced.<p>[1] <a href="https:&#x2F;&#x2F;yusugomori.com&#x2F;projects&#x2F;css-sans&#x2F;archive" rel="nofollow">https:&#x2F;&#x2F;yusugomori.com&#x2F;projects&#x2F;css-sans&#x2F;archive</a>
rambojazz大约 7 年前
It would be useful if you could add a LICENSE file in your repository.
dxxvi大约 7 年前
Creative, not sure if it&#x27;s useful. Is it easy to change the font size?
评论 #16821049 未加载
评论 #16821639 未加载
评论 #16820932 未加载
评论 #16821022 未加载
onion-soup大约 7 年前
What is next? OS written in CSS?
评论 #16821585 未加载
ibdf大约 7 年前
So are you supposed to write the whole thing using spans? Seems hard... maybe one way to pass the accessibility test (screen readers) is by putting the respective letter inside the span and set font-size to zero.
dubcanada大约 7 年前
The coolest thing I think is that all os&#x27;s render the text&#x2F;font the same way.
moltar大约 7 年前
Just because you can doesn’t mean you should comes to mind :)<p>But that aside - pretty cool!
hv42大约 7 年前
reminds me of this nice icon project, where icons are also designed with one css block: cssicon.space
dingo_bat大约 7 年前
Your scientists were so preoccupied with whether or not they could that they didn&#x27;t stop to think if they should.
TheAceOfHearts大约 7 年前
Fuck accessibility, right? Neat project, but please don&#x27;t actually use this for anything serious. A lot of people use accessibility tools to interact with the web, and this this would make it nigh impossible for them to consume your content.
评论 #16821658 未加载
评论 #16821611 未加载