谷歌网络字体还是 Typekit?

平面设计 字体 谷歌 网站设计 打字机
2022-01-03 04:14:44

作为平面设计师,我做网站设计,但不做开发。今天有人问我是否知道 Typekit,我没听说过,所以我用 Google 搜索了一下,它看起来很像 Google Web Fonts 的付费版本;我偶尔使用。我不知道使用其中一个或另一个的技术、开发人员原因,但我不希望我的客户在他可以免费使用其他东西并获得相同结果的情况下购买东西。所以,我的问题是,一个比另一个更好吗?还是两者都有优点和缺点?

4个回答

另一个比其中任何一个更灵活的选项是使用@font-face

它是免费的,你可以使用任何你想要的字体。只需要将字体上传到站点托管的任何位置并在 css 中指定它。唯一的事情是您必须转换字体格式以与不同的浏览器兼容。

这是一个例子——假设你想使用 LeagueGothic 字体:

1) 使用字体转换器将其转换为 .ttf、eot、woff 等。 http://www.fontsquirrel.com/fontface/generator

2) 将所有字体文件上传到字体文件夹

3)在您的 CSS 中,包括(确保相应地更新路径 url):

      @font-face {
       font-family: 'LeagueGothicRegular';
       src: url('../fonts/League_Gothic-webfont.eot');
       src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/League_Gothic-webfont.woff') format('woff'),
       url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
       url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
       font-weight: normal;
       font-style: normal;
     }

4)当你想使用它时,只需调用它:

    h3{ 
      font-family: 'LeagueGothicRegular', 'Gill Sans', 'Lucida Grande', Trebuchet, sans-  serif; 
    }

没有尝试过 Typekit,但我认为它本质上是做同样的事情 - 只是为您取消了转换步骤和托管,并且还提供了很多字体可供选择。@font-face 确实没有那么多工作,所以我个人更喜欢它。

查看这篇文章了解更多信息:http ://sixrevisions.com/css/font-face-guide

首先,您对 Google Web Fonts 上字体的类型选择和字符间距是否满意?我还没有使用过它们,尽管我已经看到至少一两个网站在使用它们时效果很好。同时,他们的一些字体显示显示不适合字母(主要是字母之间的空间太大)。

如果您需要匹配印刷中使用的 Adob​​e 字体,Typekit 之类的声音可能适合您。他们目前在基本帐户级别上没有显示太多 Adob​​e 字体,尽管有很多选择。基本帐户非常便宜,因此客户应该能够负担得起。我现在在 DrupalGardens 上的博客上使用它,并且享受能够使用 Myriad Pro 的乐趣。

可能归结为选择您要使用的字体,查看哪个站点具有您想要的或接近它的内容,然后顺其自然。您可以查看 Typecast,这是一个目前处于私人测试阶段的新网站,您可以在其中在浏览器中进行设计,从 Google、Typekit、Fonts dot com 等中选择 webfonts,使用 web 字体创建您的网站设计,看看它的外观,然后订购适合您的字体。我已要求加入测试版,以进行检查。当然应该让设计师的过程更顺畅。

在技​​术方面,它们几乎相同。

在产品方面,它们的不同之处在于 Google 专注于开源产品(免费),而 Typekit 专注于商业类型许可。

关于使用哪种字体的决定实际上取决于您要使用哪种字体。

请注意,许多代工厂和类型分销商现在都提供 typekit 之类的服务,所以一定要货比三家。

您还应该查看 webfonts.fonts.com,因为他们也有大量的网络字体可供选择。它们还带有许多品牌使用的顶级品牌字体,如 Helvetica、Avenir、Univers、Frutiger 等等。它们还带有许多第三方铸造字体。看看这个!