开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Tailwind中Typekit字体的问题

Tailwind是一个流行的CSS框架，它提供了一套现代化的样式工具，可以帮助开发人员快速构建用户界面。Typekit是Adobe公司提供的一项字体许可服务，它允许开发人员在网站上使用各种高质量的字体。

在Tailwind中使用Typekit字体，需要按照以下步骤进行操作：

注册Typekit账号：访问Adobe Typekit官方网站（https://fonts.adobe.com/typekit），注册一个账号并登录。
创建项目：在Typekit控制台中，创建一个新的项目，命名为你想要的名称。
浏览字体库：在项目中，浏览Typekit提供的字体库，选择你喜欢的字体。
添加字体：点击选中的字体，然后点击页面右上角的"Use Fonts"按钮，将字体添加到你的项目中。
获取代码：在Typekit控制台中，点击页面右上角的"Embed"按钮，选择适合你的代码选项（一般选择"Web"），然后复制提供的代码片段。
在Tailwind中使用：将复制的代码片段粘贴到你的HTML文件的<head>标签中。
应用字体样式：在Tailwind的CSS文件中，使用适当的类名来应用Typekit字体。例如，使用"font-sans"类来应用无衬线字体。

Typekit字体的优势在于它们提供了丰富多样的字体选择，可以让网站在视觉上更加吸引人。它们适用于各种网站和应用场景，包括企业网站、博客、电子商务平台等。

腾讯云提供了一系列与字体相关的产品和服务，例如：

腾讯云字体库：提供了丰富的中文和英文字体，开发人员可以通过API接口或SDK集成到自己的应用中。详情请参考：https://cloud.tencent.com/product/font
腾讯云内容分发网络（CDN）：可以加速字体文件的传输，提高网页加载速度。详情请参考：https://cloud.tencent.com/product/cdn

请注意，以上提到的腾讯云产品仅为示例，其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Adobe Illustrator AI 2017完美的矢量图形设计利器+全版本安装包

Adobe Illustrator（简称AI）是Adobe公司出品的矢量图形设计软件，广泛应用于平面设计、插图绘制、标志设计、包装设计等领域。AI 2017是Illustrator软件的一个版本，是其第21个版本，于2016年11月正式发布。

02

70K star! 探秘目前最流行的css框架

Tailwind CSS 是目前获得star数量最多的css框架，less只有16.9k，sass 14.6k;今天就来探究一下为何Tailwind CSS这么受欢迎

04

Vue3中使用Tailwind CSS

当谈到前端开发框架时，Tailwind CSS 是一个备受瞩目的选择。它是一款功能强大且灵活的CSS框架，提供了大量的实用工具类，帮助开发者快速构建现代化的用户界面。在本篇技术博客中，我们将深入了解 Tailwind CSS 的主题和使用。

06

最实用的6个设计排版准则

作为一个设计师的最重要技能之一就是你要学习如何去选择排版。这是因为文本是设计师与用户沟通的主要方式之一。排版能成就你的设计，也能毁灭你的设计。一个美观又复杂的排版。有些人将他们全部的事业奉献在了排版上。值得庆幸的是，他们的工作是有据可查的，所以我们有大量的在线排版资源。本文的目的是作为一个起点帮助你学习如何为你的设计选择排版。它将激励你探索超乎你所认知的字体间的组合。确定你的目标在你做任何事之前，你首先要确定你设计的目标。你想要传达的是什么信息？你的设计媒介是什么？优秀的设计使其排版与其目的具有一

04

Tailwind 初识

上一篇文章 Angular 中 SASS 样式的使用中，我们已经介绍了 sass 样式的介绍。本文，我们来介绍另一个编写样式的神器 -- Tailwind。

02

使用 webfontloader 优化加载字体在网页中的显示体验

继上篇文章网页字体文件最后再加载实现方法，后写的一篇优化加载字体在网页中的显示体验。

03

从自身开发体验谈谈Tailwind CSS

TailWind CSS 是最近两年比较火的一个原子类CSS框架，截止目前在GitHub的Star达到了接近60k，在npm上每周的下载量也超过了3600k。

01

Tailwind CSS 是目前世上最好的CSS框架，你赞同吗？

今天看了一篇国外大佬对 Tailwind CSS 的看法，在这里分享给大家，看看大家是否赞同，以下是其相关内容的整理，由于翻译水平有限，欢迎大家讨论和指正。

03

无需书写 CSS！只需关注HTML，即可快速构建美观的网站

Tailwind CSS 是一个实用工具优先的 CSS 框架，它提供了一系列低级别的 CSS 类，这些类可以直接应用于 HTML 元素上。与传统的 CSS 框架（如 Bootstrap、Foundation）不同，Tailwind CSS 不提供预定义的组件，而是通过组合这些基础类来构建用户界面。其核心理念是通过小而单一职责的工具类来实现高度的可定制性和灵活性。

01

我常常因为不会写主题而感到和你们格格不入

改了好几天，翻遍了 Hugo Jekyll Hexo 的模板仓库，又翻完了 Typecho 的主题站。感觉没啥好看的又开始翻友链，翻了得有个两三天，最后缝合了一个单栏模板。

01

上手体验TailwindCSS

我是🏅有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。写作背景：在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用，有什么优势~ 快速开始：创建 vite + vue-ts 项目： yarn create vite 安装 Tailwind CSS 依赖： npm inst

02

分享 6 个你需要使用 Tailwind CSS 的原因

过去，我们需要编写复杂的媒体查询来使我们的界面具备响应式能力。但是使用Tailwind CSS，实现响应式设计就像给HTML元素添加类一样简单。您可以直接在类属性中指定响应式的行为，而无需在单独的CSS文件中定义媒体查询。

04

【总结】1832- 一步步从 CSS Modules 切换到 Tailwind CSS

https://juejin.cn/post/7237425753612288055

05

WebFont 三宗罪之一：WebFont 与 FOUT

四赴T.I.T 创意园面试，所学甚多。这篇文章是昨天面试中探讨的一个问题所延伸而来，现在都说WebFont 怎么好怎么好，让我们逆向思维，揭底WebFont 的一些缺点（劣势）。本文综合多篇文章来探讨WebFont 与 FOUT。首先，神马是 FOUT FOUC，即无样式内容闪烁(Flash of Unstyled Content)，指的是 Web 字体在下载并渲染之前，短暂显示无样式文本的情况。它会严重影响用户体验，尤其是当字体样式渲染前后有明显不同的时候。这个名词是09 年的时候由一个老外提出命名的（

07

第 011 期用 Tailwind CSS 来快速写样式

Tailwind CSS 是功能强大的 utility-first 的 CSS 类框架。

01

一文搞懂css、scss、tailwindcss区别

SCSS（Sassy CSS）和 CSS（Cascading Style Sheets）是两种用于定义网页样式的语言，它们之间有一些关键的区别：

02

Web-Fontmin -- 在线提取你需要的字体

关于@font-face @font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片段，它可以让 @font-face 兼容所有浏览器。 [@font-face](/user/font-face) { font-family: "SentyZHAO"; src: url("/fonts/SentyZHAO.eot"); /* IE9 */ src: url("

08

Web-Fontmin -- 在线提取你需要的字体

@font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片段，它可以让 @font-face 兼容所有浏览器。

03

tailwindcss 从0到1

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计

02

chrome插件开发教程[特别实用的几个网站]

越来越多的前端开发人员喜欢在Chrome里开发调试代码，Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。尤其Chrome本身是可以登录的，登录后你所有的插件都会自动同步到每一个登录后的Chrome的，非常方便啊。

03

Tailwind CSS，值得2024年的你一试吗？

对于那些终于找到了自己热爱的编程工作的开发者们来说，他们常常会遇到一个难题：用编程谋生固然美妽，但当你不得不反复做着相同的任务时，这份热爱还会持续吗？我们知道，编写CSS可能看起来很有趣，但如果要重复进行，情况可能就大不相同了。

01

使用 CSS variables 和Tailwind css实现主题换肤

在 2B 的项目中，常常有客户（甲方爸爸）需求，定制与他们企业相同的主题的网站；随着苹果暗黑模式的推出，换肤的需求在网站开发中越来越多，也越来越重要，最近在网上看到 Tailwind Labs 的实现的换肤视频，决定实践一把。

02

使用 CSS variables 和Tailwind css实现主题换肤

在2B的项目中，常常有客户（甲方爸爸）需求，定制与他们企业相同的主题的网站；随着苹果暗黑模式的推出，换肤的需求在网站开发中越来越多，也越来越重要，最近在网上看到 Tailwind Labs的实现的换肤视频，决定实践一把。

02

Tailwind CSS那些事儿

在回望过去，展望未来- 2024 React 生态一览表中讲到CSS时，我们提到过Tailwind CSS，并且也说会有相关的文章。

03

《精通CSS》第4章网页排版

或许大家会觉得排版都是设计师的工作，前端开发按照已经排版好的设计稿复原就行。当然，这样理解也没有太大问题，但是过于依赖于设计师往往会限制我们的脚步。作为前端开发，对于排版我们要有自己的认知，而且更好地理解 CSS 中关于网页排版的技术，我们也能更得心应手地还原设计稿。

02

十大令人振奋的移动端APP设计趋势

原文出处： Medium 译文出处：优设网 - @陈子木从移动端兴起，主流设计风格定型，再到Uber、Vine等现象级APP的崛起，移动端的APP设计直到现在才渐入佳境。促成这一切的影响因素很多，比如社会发展趋势的变化、共享经济的大热、新技术的积累，等等等等。这些事物的出现需要时间积累，这也是为什么这些应用到现在才火起来。同样的，今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备。随着日常生活中所涉及到的移动端应用的增加，用户在这些东西上的所耗费的精神和脑力也越来越多。查看邮件、

04

谈谈 CSS 预处理器

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

03

Star 17.3k！这个截屏项目火了！给它一张屏幕截图，即可一键克隆网页！

你敢信，只凭借着一张屏幕截图即可转换生成 HTML/Tailwind CSS 代码。可以算得上是前端工程师的福音。它就是 screenshot-to-code。

02

让你开发更舒适的 Tailwind 技巧

使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀，但我还是发现了一些技巧，可以进一步提升使用这个框架的体验。

02

为什么我们不擅长 CSS

快来免费体验ChatGpt plus版本的，我们出的钱体验地址: https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

01

Tailwind CSS 真有那么好吗？讨厌它的前六大原因

Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快、更轻松地创建自定义设计。然而，并不是每个人都对 Tailwind CSS 感到满意。事实上，有很多原因让你应该避免使用它，而坚持使用纯 CSS 或其他框架。以下是你应该讨厌 Tailwind CSS 的主要原因：

01

解锁网页设计新境界：一文掌握Tailwind CSS

Tailwind CSS是一个高度可定制的实用工具优先的CSS框架，它提供了构建网站界面的底层CSS类，使得开发者可以通过组合这些类来快速构建出独特的设计。与传统的CSS框架（如Bootstrap或Foundation）不同，Tailwind不提供预设计的组件，而是提供原子化的、可复用的工具类，使得你可以按照自己的设计轻松地创建界面，而不必覆盖大量预设样式。

01

解锁全栈能力：java程序员的全栈自我革新与ChatGPT的智能协助

之前开发 Chat.GPTMIni.ai 的时候为了快速上线，找朋友做了前端，上线以来每个月有几百块的微薄收入，但是已经好几个月没有更新过了。感觉对那些付费用户蛮愧疚的。

01

Google Fonts 已支持思源宋体！

就在昨天，一次偶然，我打开了 Google Fonts 的网站，眼前一亮！惊奇地发现了被英文字母包围的汉字！什么？Google Fonts 居然支持汉字了！？是的，查阅相关资料后，根据国外的这个网站上的两篇文章：

01

2022年面向前端开发人员的9个最佳UI组件库/框架

如果你参与Web开发，很可能听说过UI组件库和CSS框架。UI组件库是一组预制样式（如字体、组件或颜色），可用于快速构建网站。这些UI组件使开发人员能够创建解决常见问题的代码——例如，创建适用于所有设备的按钮和组件，或添加已经为你设计的菜单和预构建元素，这样你就不必从头开始构建它们。在本文中，我们将探索在构建下一个项目时使用UI组件库或CSS框架的主要好处，然后我们将介绍一些目前市场上免费选项的绝佳选择！

07

面向程序员的 10 款开源字体，个个都是极品，你最喜欢哪一款？

点击关注公众号，Java干货及时送达出品 | OSC开源社区（ID：oschina2013）在百花齐放的开源世界中，开源字体属于较为小众的一个分支。不过往往越是小众的领域，反而会诞生出更多惊艳的作品。本文将为大家介绍开源字体中或颇具特色，或制作精美，或独具匠心，或有深厚历史背景的作品。 1、JetBrains Mono 许可证：SIL Open Font License 1.1 官网：https://www.jetbrains.com/lp/mono/ 开发商：JetBrains JetBrains

03

高效地将 TailwindCSS 与 Nuxt 结合使用

在这篇文章中，我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用，而不是直接使用图像或 SVG 图标，以及如何基于给定图像为 TailwinCSS 构建自定义调色板。

02

CSS3魔法堂：认识@font-face和Font Icon

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　过去我们总通过图片来美化站点的LOGO、标题、图标等，而现在我们可以通过@font-face获取另一种更灵活的美化方式。二、看看例子　　　　　　　　　　　　　　　　　　　　　　　　　　　 /* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src:

08

面向程序员的精品开源字体

出品 | OSC开源社区（ID：oschina2013）在百花齐放的开源世界中，开源字体属于较为小众的一个分支。不过往往越是小众的领域，反而会诞生出更多惊艳的作品。本文将为大家介绍开源字体中或颇具特色，或制作精美，或独具匠心，或有深厚历史背景的作品。 1、JetBrains Mono 许可证：SIL Open Font License 1.1 官网：https://www.jetbrains.com/lp/mono/ 开发商：JetBrains JetBrains Mono 是 JetBrains 公司专

01

用tailwindcss适配暗黑模式竟如此简单

接着上面一篇《从Nuxt文档里发现色彩的配搭诀窍》的内容，本文是我继续对 Nuxt/Content 的探索。当我研究它的色彩系统的时候，我还发现它还提供了暗黑模式，这也算是色彩系统的一种吧，毕竟也是和色彩搭配有关。经过一番学习折腾之后发现它的暗黑模式实现非常简单，甚至不需要你对这个模式有多么深刻的理解，只需要设置几个选项就能完成，并且搭配了 tailwindcss 的 color 系统灵活性也非常的好。

03

牛逼！50.3K Star！一个自动将屏幕截图转换为代码（HTML、VUE、React）的开源工具！

在当今快节奏的软件开发环境中，设计师与开发者之间的协同工作显得尤为重要。然而，理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本。为此，开源社区中出现了一个引人注目的项目——screenshot-to-code，它利用AI人工智能技术（机器学习算法和视觉分析技术），将屏幕截图自动转换为前端代码，为设计师和开发者之间的合作开辟了新的可能性。

01

新年新工具：2024年开发者必试的17款Chrome效率提升插件

今天，我想分享一些我个人非常喜欢，同时也极大提升我的工作效率的浏览器扩展。无论你是开发者、设计师，还是善于多任务处理的高效率工作者，这些扩展都可能会让你的体验更上一层楼。

01

基于云函数全景录制，用 Markdown 和 Tailwind CSS「写」视频

01. 传统视频制作的缺点以往我们都已经习惯了通过专门的软件来制作视频，但是这些软件往往有很高的学习成本，需要花很多的时间去熟悉它的功能、菜单以及它自己制造的一些概念，理解以后，才能随心所欲的做出想要的效果。另一方面，这些软件几乎都是通过图形界面来操作，当我们有内容要进行修改时，必须打开这个软件，手工的去调整。比如你想改掉视频中一个名词，只能一个一个地方的去找，而不能像我们在编辑器中直接批量替换。在过去，我们把这些作为成本接受了下来。但是现在，随着各种技术的发展和成熟，我们多了一个选择。 02. 用

02

深度解析 tailwindcss 设计源规则

这段时间陆陆续续收到了很多朋友对于如何更进一步使用 tailwindcss 的提问，发现大家在学习和使用 tailwindcss 的过程中，并没有掌握真正的核心的要点。所以经常会在一些时候比较无所适从。例如，如果公司有自己的设计规范，我应该如何调整 tailwindcss 去自定义我的设计方案？

01

WEB开发中40+高质量的免费资源【多图但值得一看】

对开发者来说，资源非常重要，因为在编码的时候可以提高很大程度上提高生产力。通过几个月，我收集到了一些链接，然后我很乐意跟大家分享其中部分。希望它们对你有所帮助。废话少说，这里提供了很棒的免费且最新的资源。

03

Animate动画制作软件下载：Adobe Animate 2023最新中文版安装教程附安装包

Adobe Animate 2020是一款用于创建动画、交互式媒体和Web应用程序的工具。该版本发布于2019年11月，并引入了许多新功能和改进，其中包括以下几个方面：

01

高清ICON SVG解决方案（上） - 腾讯ISUX

随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。 1.多倍图片目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍，devicePixelRatio= 3就做三倍，有些人可

04

VS Code settings.json 10 个高（装）阶（杯）配置！

本篇译自：Top 10 Advanced VS Code Settings for Senior Developers

03

用过 tailwindcss 才知道，命名真的是顶级痛点

对 tailwindcss 早有耳闻，但在我以前的观念里，tailwindcss 那简直就是开历史倒车，所谓的原子化 css，不就是早年的 bootstrap 么？我怎么可能接受这样的技术方案？

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭