减小mat图标svg字体粗细 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Font屌：中文图标字体（并支持SVG格式）

最近入手高清版的 MacBook Pro 之后，开始研究高清屏下一些图标怎么去展示的问题，一通瞎搜索，发现最好的方式是使用字体图标。...国外这方面的资源很多，而国内图标字体非常少，今天终于找到一个中文字图标：Font屌（对于这个名字，各位自行评价吧...）。...Font屌中文图标字体，可用于 Web 和 iOS 应用的中文图标字体，同时提供了国内各种常用网站、应用、知名企业的徽标 SVG 源文件（包括如微信（wechat）、腾讯QQ、QQ空间、微博等）。...一个字体包含 70 个图标：客户端浏览器只下载一个字体，就能拥有 70 个常用中文网站、知名企业的图标。...提供 SVG 源文件：任何人都能改进这些图标，加入更多常用中文网站、应用的图标。 CSS 控制 (仅限 Web)：你可以非常方便地控制图标的颜色、大小、阴影等所有可以用 CSS 控制的属性。

1.2K2 0

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

文章目录一、FlutterIcon 下载图标二、自定义 svg 图标生成 ttf 字体文件三、使用下载的 ttf 图标文件四、完整代码示例五、相关资源一、FlutterIcon 下载图标 -..., 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter...图标生成 ttf 字体文件 ---- https://www.fluttericon.com/ 中 , 将 SVG 格式的图标拖动到该地址页面的 Custom Icons 区域 , 拖动过程 :...ttf 图标文件 ---- 将 MyFlutterApp.ttf 字体文件拷贝到 Flutter 源码根目录下的 fonts 目录下 , 在 pubspec.yaml 配置文件中配置字体文件 , name...: 图标绘制方向 , 是否按照 svg 文件中的方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应的编码是 0xe855 ; Center( // 加载自定义图标

4.8K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

想要字体图标设计师却给了SVG？没关系，自己转

本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。...Varlet提供了一些常用的图标，图标都来自 Material Design Icon。转换SVG为字体图标图标原文件是svg格式的，但最后是以字体图标的方式使用，所以需要进行一个转换操作。...包将多个svg文件转换成一个svg字体文件，何为svg字体呢，就是类似下面这样的： svg字体请阅读SVG_fonts。...svg文件的名称是有固定格式的： uFxxx是图标的Unicode代码，后面的是图标名称，名称也就是我们最终使用时候的css类名，而这个Unicode实际上映射的就是字体中的某个图形，字体其实就是一个

1.9K1 0

Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（图标选择器篇）

本地SVG图标：直接将svg文件放入指定的文件夹内，实现自动加载该文件夹所有的svg，并利用Icon组件直接使用，无需手动import。...Iconfont（阿里巴巴矢量图标库），实现了自动载入Font clas(css链接,载入后即可通过class来使用对应的字体图标)，实现Icon组件的语法兼容性，然后自动解析出Font class内的所有图标名称...├─components│ │ ├─icon│ │ ├─svg│ │ │ ├─index.ts 加载本地SVG文件的实现│ │ │ ├─index.vue svg显示组件的实现│...│ ├─index.vue Icon 组件的实现│ │ └─selector.vue 图标选择器组件的的实现| ├─utils│ │ ├─iconfont.ts字体图标辅助函数库│ │...获取本地图标名称列表在实现Icon组件时，我们已经导入了所有的本地SVG文件的内容到项目内，导入后，页面加入的svg元素类似这样：可以看到，我们已经使用data-icon-name属性，将所有的图标名称记录了下来

4.3K2 0

【前端攻略--HTMLCSS】边框、文字效果与字体图标实例介绍

*/ font-size: 100px; /*字体*/ font-family: "微软雅黑"; /*字体粗细,100(最细)-900（最初...），真正还是要看系统是否自带了粗细的字体*/ /*lighter bold bolder,系统是否自带了粗细的字体*/ font-weight: 500;...：字体：实际上是长得像图标的字体，占用的空间小，消耗的带宽小，能够更快的显示页面。...字体是矢量的，所以不会失真，可以按照字体一样设置字体颜色和大小。上阿里巴巴矢量图标库http://www.iconfont.cn/下载字体图标，选择添加到库，在库里统一下载到本地，别直接下载图片。...这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

2.5K1 0

Angular 项目中 assetsicons 文件夹的作用详解

在这个标准的目录结构中，/src 目录包含了项目的源代码，而 assets 是 /src 下的一个子目录，常常用于存放静态资源，比如图片、字体、样式文件等。...开发者可以很方便地找到所有的图标资源，并根据需求进行修改或替换。结构清晰：通过将图标与其他资源（如图片、字体）分离存放，整个 assets 目录会更加井井有条。...文件复用：图标通常会在多个页面或组件中复用，如果将这些图标集中存放，可以避免重复定义资源，提高开发效率，并减小项目体积。...图标文件格式的选择：SVG 的重要性通常在 /assets/icons 文件夹中，我们会存放大量的 SVG 文件。...，随后在模板中可以通过 mat-icon 组件直接使用这个图标：mat-icon svgIcon="custom_shopping_cart">mat-icon>这种方式使得自定义图标的使用变得非常方便

1.4K1 0

svgtofont.js 自动生成图标字体和彩色图标文件

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。...图标将放到平台中维护，下载字体文件到项目中使用，这样团队维护生成字体成本将非常高。...通过图标平台网站下载 svg 图标，将图标放到项目中管理，通过 svgtofont.js 工具来生成它，这将是新的字体图标使用方式： ┌─...，不再维护字体文件生成彩色图标文件 SVG Symbol 在项目中使用 svgtofont 读取一组 SVG图标并从SVG图标输出 TTF/EOT/WOFF/WOFF2/SVG 字体，字体生成器。...svgicons2svgfont.fontWeight Type: StringundefinedDefault value: '' 你想要的字体粗细。

7.4K4 0

OneCode 组件功能属性速查手册

string如: '12px', '1em'fontColor字体颜色string颜色值fontWeight字体粗细stringnormal, bold1.3 数据相关属性属性名说明类型可选值value...type: 'button', // 按钮类型: button, submit, reset caption: '确定', // 按钮文本 imageClass: 'icon-save', // 图标类名...iconFontCode: '', // 图标字体编码 disabled: false, // 是否禁用 visible: true, // 是否可见 onClick: ()...fontColor: '#333', // 字体颜色 fontWeight: 'bold', // 字体粗细 dock: 'left', // 停靠方式 onClick: () => {} /...// 是否可编辑 onSelect: (item) => {}, // 选择事件 labelCaption: '选择', // 标签文本 iconFontCode: '' // 图标

6451 0

:before 和 :after的多用途实践 — 提升篇

icon font 指的是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。...'); /*定义字体文件所在路径*/ } .icon {font-family: 'icon';} /*使用字体*/ /*生成图标*/ .fa-th-large:before...字体文件我用的是Font Awesome的，到下面这个网址，可以下载，也可以找找你喜欢的图标来用。.../*必需的字体文件路径*/ src: [][, []]*; /*可选定义字体的粗细。...#YourWebFontName') format('svg'); /* Legacy iOS */ } 解释下src: url('YourWebFontName.eot?

1.1K3 0

鸿蒙ArkTS | Badge 信息标记组件自学指南

在做 UI 设计时，我们经常会碰到这样一个需求：要在某个图标、按钮或列表项的角落加一个小小的提示，比如红点、新消息数量、状态标签之类的。这时候就轮到 Badge 组件登场了。...badgeSize: 6, // 圆点直径 badgeColor: '#FA2A2D' // 红点颜色 } }) { Image('/common/public_icon_off.svg...BadgePosition.Right, style: { badgeSize: 16, badgeColor: '#FA2A2D' } }) { Image('common/public_icon.svg...badgeColor: '#FA2A2D' } style 对象支持的字段： badgeSize: 标记直径（如 16vp） badgeColor: 背景色 color: 字体颜色...fontSize: 文本大小 fontWeight: 字体粗细 borderColor: 边框颜色 borderWidth: 边框宽度动效说明（API v12+）从

8501 0

OpenCV 绘制图形

Point pt2, //线的终点 const Scalar & color, //线的颜色 int thickness = 1, //线的粗细...//和上一个顶点相对的顶点 const Scalar & color, //线的颜色 int thickness = 1, //线的粗细...radius, //半径 const Scalar & color, //线的颜色 int thickness = 1, //如果是正数，则为线的粗细.../要显示的字符串 Point org, //图片中文本字符串的左下角 int fontFace, //字体类型...double fontScale, //字体大小 Scalar color, //颜色 int thickness

1K2 0

OpenCV画直线，画圆，画椭圆，画矩形，绘制文字

include #include using namespace std; using namespace cv; void drawLine(Mat...&image); void drawRectangle(Mat& image); void drawEllipse(Mat& image); void drawCricle(Mat& image);...drawEllipse(MyBG); drawCricle(MyBG); //MyBG是背景图，"666"是画上去的文字，Point表示画的起点 //FONT_HERSHEY_SIMPLEX是字体...，2表示粗细 //Scalar是颜色，3是代表字体的线条宽度 putText(MyBG, "666", Point(200, 50), \ FONT_HERSHEY_SIMPLEX, 2, Scalar...Point p2(533, 300); Scalar color = Scalar(255, 0, 0); //image表示在哪儿画，p1,p2是线段的端点，color是线的颜色，3代表线的粗细

4.8K1 0

复制粘贴就可以使用的Power BI图标素材查询系统2.0

前期制作了一个图标查询工具（参考：复制粘贴就可以使用的Power BI 图标素材查询系统），读者可以在完全不了解SVG代码的情况下，直接复制粘贴，在自己报表中使用这些图标。...调整粗细和颜色后，可以放在条件格式或者表格列：整个操作过程无需懂得任何SVG知识，但是Power BI基础知识是需要的，比如IF或者SWITCH进行图标切换，本例度量值如下：排名图标 = SWITCH...([排名], 1,1的SVG图标, 2,2的SVG图标, 3,3的SVG图标, BLANK() ) 以下视频是访问及使用说明：模板左侧是查询条件设置区域，可以按关键字查找（比如箭头、笑脸、数字等等...），图标的线条粗细、颜色均可以自定义，方便用于指标变化图标样式需要变化的场景。...模板右侧表格展示了图标，图标会依据左侧条件的变化而变化。表格同时列示了在条件格式和在表格列的效果。最后一列显示了图标对应的SVG文本，可以复制后用到自己模型。

1.6K3 0

scetch入门第2部分：文本，对齐和SVG在第3部分中了解如何导出文件

使字体大小为36，文本对齐中心和填充颜色为白色。 ? 编辑文字如您所见，文本不是相对于矩形居中。要解决此问题，请按住Shift并同时选择矩形和文本。 ?...我在The Noun Project下载了Will Deskins设计的可爱猴子图标。点击这里直接下载SVG。（记得根据名词项目的指导方针在你的项目中给予肯定！）...下载并解压缩SVG文件后，将其直接拖到Sketch画板中。 ? 将SVG拖动到画板选中图标后，让我们在屏幕左侧的“图层”菜单中进行一些调查。...此SVG包含在名为“noun_59767_cc”的图层组中。如果单击箭头将其展开，您将看到三个名为Layer_1，Layer_2和Layer_3的子图层以及一些用于艺术家信用的文本图层。 ?...通过只选择一个文本图层并将字体粗细更改为粗体... ? 将文本样式更改为粗体是的，你猜对了！即使您只选择了一行文本，这两行文本也会更改为粗体。你可能会看到这是怎么回事。

7.2K3 0

小图标，大学问

而图标，在实际应用中经常会和普通文字一起混排，这些特点正是我们想要的。 ? 不过，字体图标也有一些缺点。首要的缺点是单色。由于字体中只有矢量数据，没有颜色数据，因此，字体图标必然是单色的。...虽然有一些工具可以帮你把一组 svg 文件拼合成一个字体文件，但是它们对 svg 的格式有严格的要求，不是任何一个 svg 都可以用的。你很难向 UX 解释什么样的图能用、什么样的图不能用。...其次，即使是可用的 svg，你也很难告诉工具每个图标的字体基线是哪个（通俗来说，基线就是你这个图标的底部和字母 g 的底部对齐，还是和字母 h 的底部对齐）。...即使你不需要彩色图标，凭借 svg 对元素透明度的支持，也可以让你的图标比字体图标更加丰富多彩。二是图标的大小不会自动跟随字体大小。...很多工具导出的 svg 文件很啰嗦，里面有很多对于显示没有意义的东西。一些 svg 图标即使减小到原来体积的一半儿都不会影响显示，因此，针对 svg 本身做一些优化也是有价值的。

2.2K1 0

答案可能藏在图标里（附下载）

答案可能藏在图标里（附下载）一个基于 Iconify 的图标技能，用 150,000+ 开源 SVG 图标替换 emoji，让 AI 生成的网页、PPT 和文档摆脱"AI味"。...结果就是：每个图标风格不一、粗细不同、色彩无法统一，整体视觉协调感被彻底打破。二、对比：emoji vs....方案 B（Iconify SVG）：六个统一风格的图标整齐排列，视觉节奏清晰，可以直接放入正式交付物。..."服务器"是一个统一风格的 SVG 图标，而非 ️ emoji技能触发词（可自定义）：图标搜索、找图标、icon、Iconify、SVG图标、图标导出关键优势：AI 不再需要"猜"哪个 emoji 最贴切...AppPhosphorph:六种粗细（thin/light/regular/bold/fill/duotone）数据可视化Tablertabler:4800+ 图标，线条精致六、作为设计工作流的图标依赖

4331 0

自研flutter3.22+getx手机版os桌面管理系统

使用技术编辑器：VScode技术框架：Flutter3.22.1+Dart3.4.1路由/状态管理：get^4.6.6本地存储：get_storage^2.1.1svg图片插件：flutter_svg^...colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), useMaterial3: true, // 修复windows端字体粗细不一致...* [imgico] 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名，当type: 'widget'则为自定义小部件标识名 * [type] 图标类型(icon |...widget) icon为uni-icons图标、widget为自定义小部件 * [path] 跳转路由页面 * [link] 跳转外部链接 * [hideLabel] 是否隐藏图标标题 *...'children': [ {'label': '个人主页', 'imgico': 'assets/images/svg/my.svg', 'path': '/ucenter'},

1.1K0 1

基于flutter3.32+window_manager仿macOS桌面os系统

colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo), useMaterial3: true, // 修复windows端字体粗细不一致...* [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型 * [path] 跳转路由页面 * [link] 跳转外部链接 * [hideLabel...] 是否隐藏图标标题 * [background] 自定义图标背景色 * [size] 栅格磁贴布局(1x1 ... 12x12) * [onClick] 点击图标回调函数 * children...svg/logs.svg', 'path': '/logs'}, {'label': '设置', 'imgico': 'assets/images/svg/settings.svg',...* [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型 * [path] 跳转路由页面 * [link] 跳转外部链接 * [active

7882 0

Power BI专用像素艺术

在Power BI表格矩阵、卡片图、按钮切片器、图像视觉对象都可以插入像素风格的SVG图标，增强可视化效果：分享一个工具，可以自由设计像素样式： https://junminwu.github.io/...Pixel_SVG_Icon.html 工具分为三个模块：最上方是参数设置，可以选择颜色、画笔粗细和画布宽高：中间是绘画区域，鼠标拖拽绘制像素形状，形状可以是各种图标，也可以是字母、中文。...使用时可以按条件切换，比如 SVG图标=IF([指标]>0,"向上箭头代码","向下箭头代码") 表格矩阵将含有SVG代码的度量值放入条件格式图标：卡片图、按钮切片器放入图像区域：

2861 0

Opencv-python画图基础知识

=8, intshift=0) C++: void rectangle(Mat& img,Rect rec, const Scalar&color, intthickness=1, intlineType...thickness – 矩形边框的粗细....font – 字体结构体....fontFace – 字体类型，可选择字体：FONT_HERSHEY_SIMPLEX, FONT_HERSHEY_PLAIN, FONT_HERSHEY_DUPLEX,FONT_HERSHEY_COMPLEX...fontScale – 字体大小，该值和字体内置大小相乘得到字体大小 color – 文本颜色 thickness – 写字的线的粗细，类似于0.38的笔尖和0.5的笔尖 lineType – 线性

1.7K5 0

点击加载更多

Font屌：中文图标字体（并支持SVG格式）

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

想要字体图标设计师却给了SVG？没关系，自己转

Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（图标选择器篇）

【前端攻略--HTMLCSS】边框、文字效果与字体图标实例介绍

Angular 项目中 assetsicons 文件夹的作用详解

svgtofont.js 自动生成图标字体和彩色图标文件

OneCode 组件功能属性速查手册

:before 和 :after的多用途实践 — 提升篇

鸿蒙ArkTS | Badge 信息标记组件自学指南

OpenCV 绘制图形

OpenCV画直线，画圆，画椭圆，画矩形，绘制文字

复制粘贴就可以使用的Power BI图标素材查询系统2.0

scetch入门第2部分：文本，对齐和SVG在第3部分中了解如何导出文件

小图标，大学问

答案可能藏在图标里（附下载）

自研flutter3.22+getx手机版os桌面管理系统

基于flutter3.32+window_manager仿macOS桌面os系统

Power BI专用像素艺术

Opencv-python画图基础知识

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐