文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

点击关注公众号，Java干货及时送达 出品 | OSC开源社区（ID：oschina2013） 在百花齐放的开源世界中，开源字体属于较为小众的一个分支。...3、Source Code Pro 许可证：SIL Open Font License 1.1 官网：https://adobe-fonts.github.io/source-code-pro/ 开发商...Source Code Pro 采用了开源字体许可证 SIL Open Font License，开源免费且可商用。...9、思源黑体 许可证：SIL Open Font License 1.1 官网：https://github.com/adobe-fonts/source-han-sans 开发商：Google & Adobe...思源黑体（也称作 Source Han Sans 或 Noto Sans CJK）是 Google 和 Adobe 合作打造的开源字体，采用了开源字体许可证 SIL Open Font License

46.7K36
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    fonts.googleapis.com访问太慢导致站点加载很慢

    方法一 使用360提供的cdn，将需要加载的谷歌字体的url放到360的Google 字体库搜索，会得到一串css代码，将代码拷贝到一个css文件中然后站点直接引入该css文件即可。...family=Roboto+Mono|Source+Sans+Pro:300,400,600这个谷歌字体，那么前往360的Google 字体库搜索得到如下代码： 1 2 3 4 5 6 7...format('svg'); /* Legacy iOS */ } 将其拷贝到新建的css文件fonts.css中，然后在站点引入该css文件： 1 字体文件woff或者ttf等下载下来，然后把css代码里的字体文件链接全改为本地的字体文件，之后依然是在站点中引入css文件即可。...解决页面中引用了谷歌字体库访问缓慢的问题 警告 本文最后更新于 March 2, 2021，文中内容可能已过时，请谨慎使用。

    5.7K10

    【前端】CSS字体相关属性详解

    设计注意事项 字体优先级顺序：font-family 属性通常指定多个字体，以确保页面在不同设备和操作系统中都能得到正确的显示。当第一个字体不可用时，浏览器会按顺序查找列表中的下一个字体。...使用通用字体：建议在列表的最后指定一种通用字体，例如 sans-serif 或 serif，以保证在其他字体不可用时仍有合适的字体可以使用。通用字体是指一种字体类别，而不是具体的字体名称。...实际应用中的注意事项 减少使用斜体：在实际设计中，我们通常不喜欢大面积使用斜体，因为它在阅读时可能不如普通字体那么清晰。...字体在实际应用中的一些建议’ 字体的选择：尽量选择系统自带的字体，以确保在不同操作系统中显示的一致性和可读性。...font-style 用于设置文本的风格，通常用来定义斜体或倾斜样式，但在实际设计中应慎用。 font 复合属性 允许开发者将多种字体属性组合成一个设置，以提高代码的简洁性和可读性。

    79110

    Web 字体 font-family 再探秘

    是一种特定的字体吗？ 字体基础知识 在继续之前，我们先简单回顾关于字体的一些基础知识。 衬线字体与无衬线字体 就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。...衬线字体 -- 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同，这些细节在大写字母中特别明显。 ?...无衬线字体 -- 关键字为 sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。...Chrome 和 Safari 都可以在各种平台上完全支持它。只有 Mozilla 和 Windows 相对落后。...ui，在 Windows 及 Windows Phone 上选取系统默认字体 Roboto，面向 Android 和一些新版的的 Chrome OS Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后

    3.1K10

    textview设置字体大小-Android应用开发之TextView设置个别字体样式

    (new (Color.BLUE), 2, XM.length()+2, .SIVE);   印象中的：    就是用于显示文本的控件，可以在布局文件中通过 :text属性设置需要现实的字符，或者通过对象的...从来也没有考虑过在控件中将文字以各种各样的方式展示出来。   进一步深化：    可以对其文字进行格式化。   ...x1x2电话邮件网站短信彩信地图X轴综合");   15   16 //设置字体(,-bold,,serif,sans-serif)   17 msp....(new (Color.CYAN), 15, 18, .SIVE); //设置背景色为青色   33   34 //设置字体样式正常，粗体，斜体，粗斜体   35 msp....(new ("mailto:@google.com"), 39, 41, .SIVE); //邮件   53 msp.

    1.4K30

    Flutter 上字体的另类玩法：FontFeature

    在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中，已经介绍了很多 Flutter 上关于字体有趣的知识点，而本篇讲继续介绍 Flutter...，比如虽然我们说 roboto 没有 600 ，但是如果是 roboto mono 字体集是有 600 的 fontweight，甚至还有 600 斜体： https://fonts.google.com...另外如果你在 Mac 的 Web 上使用 Flutter Web，可以看到指定的是 .AppleSystemUIFont ，而对于 .AppleSystemUIFont 它其实不算是一种字体，而是苹果上字体的一种集合别称...UI Display 默认在 Android 上： 中文字体：Source Han Sans / Noto 英文字体：Roboto 例如，在苹果上的简体中文其实会是 PingFang SC...当然后续的 #16709 修复了这个问题 ，而在以前的文章我也讲过，当时我遇到了 “Flutter 在 iOS 系统上，系统语言是韩文时，在和中文一起出现会导致字体显示异常" 的问题 ： image.png

    2.4K20

    网页中内嵌字体

    Background 今天在浏览一个网站的时候，发现了一款非常好看的字体，审查元素发现，这个字体叫Open Sans，非常惊艳。和我以前发现的一款字体Segoe UI非常像。...不同的是，Segoe UI属于微软的东西，付费，而Open Sans是免费的。 刚好自己最近在做网站开发，于是就想把这款字体嵌入到自己正在做的网页里。今天就写一下怎么把一款字体嵌入到自己的网页中。...其实在CSS中，使用font-family这个属性就直接可以将网页的字体设置成想要的。但是有个前提是，你所使用的某种特定的字体系列，在网页中是否能显示，完全取决于用户机器上该字体系列是否可用。...如果用户机器上没有这种字体，那就会变成默认的字体。 所以，为了保证可以在每一台机器上都能显示，把一款字体嵌进网页是一个不错的选择。...Code 在css代码中，我们主要使用的是font-face这个属性，它的主要功能就是把自己定义的Web字体嵌入到网页中。

    5.5K70

    web字体规范

    前言 对于设计稿的解析中，肯定是有些设计稿有特殊的字体，而这些字体可能只有设计师才有，或者只有前端拓展了系统字库才能显示器正确效果。...其中特别说明：Open Sans 的中文字体在 Mac 上效果不错，微软雅黑的中文字体在 Windows 上效果不错。...一 解决方案–具体规范 自带字体（推荐） 用户系统中自带的字体，不需要任何特殊支持的，这类也被成为web安全字体。...你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的.代码语法如下： body{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica...主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体。

    3.4K40

    【CSS】955- 你该知道的字体 font-family

    衬线字体 -- 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同，这些细节在大写字母中特别明显。 ?...无衬线字体 -- 关键字为 sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。...Chrome 和 Safari 都可以在各种平台上完全支持它。只有 Mozilla 和 Windows 相对落后。...ui，在 Windows 及 Windows Phone 上选取系统默认字体 Roboto，面向 Android 和一些新版的的 Chrome OS Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后...，以字体族系列 serif 和 sans-serif 结尾 当使用一些非常新的字体时，要考虑向下兼容，兼顾到一些极旧的操作系统，使用字体族系列 serif 和 sans-serif 结尾总归是不错的选择

    6.2K20

    2020前端性能优化清单（二）

    因此在为特定的落地页中，您可以逐步在的静态 JPEG 上使用它们以节省传输大小 ?...对于背景图像，在 Photoshop 中以 0 到 10％的质量导出图片也是绝对可以接受的。...您甚至可以使用 PeterMüller 的subfont[80]来自动完成整个字体子集化的工作流程，subfont 是一个命令行工具，可以静态分析您的页面以生成最佳的 Web 字体子集，然后将其注入到您的页面中...，如 Open Sans，会预装在一些驱动程序或应用程序中，所以如果字体是本地可用的，浏览器就可以立即显示本地字体，而不需要下载网页字体。...要测量 Web 字体加载性能，请考虑所有文本可见时间[100](所有字体均已加载且所有内容均以 Web 字体显示的时刻)、变为真实斜体的时间[101]以及首次渲染后的Web 字体回流数[102]。

    2.6K10

    「css基础」关于字体相关的基础知识（一）

    1、衬线体serif 、无衬线体sans-serif 衬线体指的是在文字笔画的端点上所加的装饰线条，因为sans 在法语中代表「无」，所以sans-serif 也就是无衬线体，与衬线字体相反，无衬线体完全抛弃装饰衬线...3、手写体cursive、幻想体fantasy 手写体和幻想体其实有点像，手写体就像是毛笔或钢笔写出来的感觉，这种字体尝试模仿人的书写笔迹，通常，这种字体在笔画末端有较大的修饰，比衬线字体更加华丽，以中文来说预设的手写体通常就是标楷体...三、常用的中文字体 英文字体因为字母少，所以预设的字体种类也比较多，中文字就不同了，一款中文字的字数远大于英文，所以在跨平台的显示也会有所不同，这也是在制作网页常见的困扰( 在Mac 设计得很好看，到Windows...2、Mac 系统 苹方( PingFang ) 黑体( STHeiti ) 楷体( STKaiti ) 俪黑Pro ( LiHei Pro ) 俪宋Pro ( LiSong Pro ) ?...）、oblique（倾斜体）这几种属性值。

    2.2K30

    「css基础」关于字体相关的基础知识（一）

    1、衬线体serif 、无衬线体sans-serif 衬线体指的是在文字笔画的端点上所加的装饰线条，因为sans 在法语中代表「无」，所以sans-serif 也就是无衬线体，与衬线字体相反，无衬线体完全抛弃装饰衬线...3、手写体cursive、幻想体fantasy 手写体和幻想体其实有点像，手写体就像是毛笔或钢笔写出来的感觉，这种字体尝试模仿人的书写笔迹，通常，这种字体在笔画末端有较大的修饰，比衬线字体更加华丽，以中文来说预设的手写体通常就是标楷体...Fantasy Copperplate、Papyrus 三、常用的中文字体 英文字体因为字母少，所以预设的字体种类也比较多，中文字就不同了，一款中文字的字数远大于英文，所以在跨平台的显示也会有所不同，...( LiHei Pro ) 俪宋Pro ( LiSong Pro ) 四、font-family 用法简介 使用font-family很简单，只需要设定family-name (字体名称)和generic-family...）、oblique（倾斜体）这几种属性值。

    1.4K00

    【Web前端】借助文本样式为网页赋予生命

    例如： p { color: #333; /* 深灰色 */ } 字体种类 ​​font-family​​ 属性指定文本的字体。可以设置多个字体，以确保在不同设备上都有合适的显示。...例如： p { font: italic bold 16px/1.5 'Arial', sans-serif; } 这段代码同时设置了字体样式为斜体、字体粗细为粗体、字体大小为 16px、行高为 1.5... 五、Web 字体 1. Web 字体的使用 Web 字体允许你使用自定义字体，而不是依赖用户的系统字体。...使用在线字体服务（如 Google Fonts）是实现这一功能的常见方法。...使用 CSS 样式化这些元素，并确保它们在页面上美观且易于阅读。包括以下要求： 使用自定义字体和 Web 字体。 设置文本样式，包括字体、颜色、大小、行高、阴影等。

    91410

    关于Serif与Sans-Serif字体

    在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和 Serif，打字机体虽然也属于 Sans Serif，但由于是等宽字体，所以另外独立出 Monospace 这一种类，例如在Web中，...但在书籍、报刊杂志，正文有相当篇幅的情形下，则应采用Serif字体来减轻读者阅读上的负担。在Web设计及浏览器设置中也应遵循此原则为是。 - serif Serif 在印刷学上指衬线字体。...所谓的末端加强，就是使用衬线或粗细变化，使字体笔画的末端得到加强，以改善小号文字的可读性。比如上面例子中的y的下半部分，还有宋体的中文字符，都是采取加粗笔划的末端来达到末端加强的效果。...Italic 不是斜体 斜体是oblique。...很多考究的字体都会为意大利体定制一套特殊的字体，而不是简单的显示成斜体。比如下面的图片里，三行文字都是Georgia字体。

    4.4K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券