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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

CSS Sans – A pure CSS font

413 点作者 snyp大约 10 年前

22 条评论

_7siz大约 10 年前
This is really well done and polished. Great stuff. About a year ago when I was bored, I made a quick and dirty codepen [1] of the exact same thing you have here. I added a transition to it so you can type to switch the letters.<p>I also made it so you can type with pure CSS letters [2]. It&#x27;s nothing great like what you&#x27;ve done, but I&#x27;d thought I would share anyways.<p>[1] <a href="http://codepen.io/ncerminara/pen/yFcfn" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;ncerminara&#x2F;pen&#x2F;yFcfn</a><p>[2] <a href="http://codepen.io/ncerminara/pen/cEbGC" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;ncerminara&#x2F;pen&#x2F;cEbGC</a>
评论 #9205075 未加载
评论 #9220232 未加载
评论 #9206076 未加载
评论 #9206215 未加载
gklitt大约 10 年前
Very cool how this project uses the font face to explore how CSS rendering has evolved over time. I find it strangely beautiful when rendered in IE 6&#x2F;7, almost like an alien language.<p><a href="http://yusugomori.com/projects/css-sans/archive" rel="nofollow">http:&#x2F;&#x2F;yusugomori.com&#x2F;projects&#x2F;css-sans&#x2F;archive</a>
评论 #9204487 未加载
tarequeh大约 10 年前
Really cool exercise in CSS. My first thought is that texts displayed using this font can&#x27;t be selected&#x2F;copied &amp; won&#x27;t be screen reader friendly. Might make for a great way to display your email or phone number on a site without worrying it would get scraped by marketers.
评论 #9204310 未加载
评论 #9204805 未加载
评论 #9204703 未加载
评论 #9207253 未加载
评论 #9204892 未加载
gkoberger大约 10 年前
Here&#x27;s another one; a bit more stylized and can be copy+pasted:<p><a href="http://people.mozilla.org/~mclaypotch/CSS-Sans/" rel="nofollow">http:&#x2F;&#x2F;people.mozilla.org&#x2F;~mclaypotch&#x2F;CSS-Sans&#x2F;</a><p>(GitHub: <a href="https://github.com/potch/CSS-Sans" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;potch&#x2F;CSS-Sans</a>)
评论 #9207030 未加载
Tomte大约 10 年前
As usual, the S looks strange.<p>No wonder Knuth dedicated a whole chapter to this one letter in &quot;Digital Typography&quot;.
michaelmior大约 10 年前
This is pretty cool. It&#x27;s unfortunate that some characters (CGJQ) require masking with a background colour to get the desired shape. It would be nice if this could be resolved so this could be used on any background.
评论 #9204712 未加载
RazorX大约 10 年前
&lt;span class=&quot;N&quot;&gt;&lt;&#x2F;span&gt; &lt;span class=&quot;E&quot;&gt;&lt;&#x2F;span&gt; &lt;span class=&quot;A&quot;&gt;&lt;&#x2F;span&gt; &lt;span class=&quot;T&quot;&gt;&lt;&#x2F;span&gt;
agumonkey大约 10 年前
Appreciate the meta css rules to explain on hover. Now let&#x27;s build an ascii rasterizer on top <a href="http://imgur.com/VyEAzsm" rel="nofollow">http:&#x2F;&#x2F;imgur.com&#x2F;VyEAzsm</a>.
nightcracker大约 10 年前
The S looks out of place.
err4nt大约 10 年前
This is the kind of stuff I come to Hacker News for! Inspirational, brilliant, beautiful, and awe-inspiring.
lewtds大约 10 年前
Very cool project but I fear that this approach will only work for relatively simple glyphs that can be broken down into 3 sections (main, :before and :after) whereas Chinese characters, for example, may take up a few dozen strokes.
bcg1大约 10 年前
I love this project, I think it is wonderful. I&#x27;m not sure of the practical usage but I don&#x27;t care, it just strikes me as smart, and looks very nice.
mobiuscog大约 10 年前
A stupid question I imagine, but wouldn&#x27;t em be more appropriate than px for the defined units ?<p>Couldn&#x27;t the size be defined proportionally to the expected size ?
_nickwhite大约 10 年前
Very nice! Now for the lower case, should be easy. :)
novaleaf大约 10 年前
what would the practical usage of this be?<p>Honest question.
评论 #9205682 未加载
adiM大约 10 年前
Would it be possible to use CSS to draw glyphs using data from Metafont source files?
评论 #9204216 未加载
jradd大约 10 年前
this is amazing!
sova大约 10 年前
seriously just blew my mind with this.
wahsd大约 10 年前
Are there any advantages to using this over other methods for large text?<p>Also, can anyone think of any practical uses for this?
评论 #9205145 未加载
wahsd大约 10 年前
Anyone have an idea what that aberration is in the hook of the Q?
评论 #9205257 未加载
hardwaresofton大约 10 年前
At the risk of making an uninteresting comment -- I really love seeing cool&#x2F;interesting work like this done by people who aren&#x27;t devs in America. Not that there&#x27;s anything wrong with American tech or devs particularly, but just that I feel like we&#x27;re finally getting at the true promise of the internet.<p>Great work, Found the characters really consistent in style, and obviously functional.
评论 #9205425 未加载
steakejjs大约 10 年前
You can already do regular fonts in pure css. See. Here&#x27;s open sans in pure CSS. <a href="https://github.com/steakejjs/OpenSans-CSS" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;steakejjs&#x2F;OpenSans-CSS</a><p>I&#x27;ve actually found its much nicer using this in my projects than using a font cdn or self hosting woff files.<p>I do like the minimalism of css rules to creating this font as opposed to having a giant data section. It&#x27;s pretty neat
评论 #9205168 未加载
评论 #9204235 未加载
评论 #9204234 未加载