HTML五角星怎么打？从字符输入到SVG绘制全攻略

经常有人问我HTML里的五角星到底怎么打这个问题其实藏着两种完全不同的需求。有人只是想往页面里放一个★字符当作标题装饰或列表前缀也有人想做一个可缩放、可变色、可加描边的五角星图形用来当评分星级、收藏按钮或者产品展示。这两种需求经常被混在一起所以搜出来的答案才会五花八门有的是输入法技巧有的是Unicode编码还有的干脆丢给你一段CSS。今天我把这条线彻底理清楚。从最基础的输入法输入到HTML实体写法再到用CSS和SVG画出任意尺寸的五角星一次讲完。顺便会把评分组件这种最常见的“五角星场景”拆开看看最后附上我实际开发中踩过的坑。不管你是刚接触HTML的新手还是已经在写前端页面的开发者这篇文章应该都能帮你少走几步弯路。1. 先分清场景你是要“打一个字符”还是“画一个五角星”1.1 最直接的输入法方案如果你不写代码只是在Word、PPT、微信聊天或者某个后台编辑器里放一个星形符号那根本不用碰HTML输入法就能解决。中文输入法下面直接敲拼音“wujiaoxing”候选词里一般会出现★和☆选一个上屏就行。部分输入法敲“xingxing”或者“星星”也能找到。这个方案最直观适合完全不懂代码的人。Windows系统还有一个隐藏的通用快捷键按住Alt键再在小键盘上依次输入9733松开Alt就会打出★输入9734则是☆。需要注意这里必须用数字小键盘笔记本上要先把NumLock打开顶部那一排数字键不行。这个方法我在Win10和Win11上都验证过属于系统级输入不依赖输入法。Mac用户更简单按下ControlCommand空格会弹出字符查看器搜索“star”或者“五角星”双击就能插入。手机端就更不用说了几乎所有输入法的符号面板里都能翻到星形符号。1.2 系统自带的字符映射工具除了输入法Windows还自带一个“字符映射表”工具。按WinR输入charmap回车就能打开在搜索框里输入“star”能看到各种风格的星形字符。选中后点“选择”再点“复制”粘贴到任何地方都行。这个工具平时用得不多但有两个好处一是能查看当前字体到底支持哪些星形符号二是某些特殊符号输入法里没有的时候它往往能找到。比如✩、✪、✫这些冷门星形输入法候选词里基本不会出现但字符映射表里有。1.3 在代码里“打”五角星Unicode与HTML实体到了HTML页面里“打五角星”就是另一套玩法了。你不能再靠输入法直接上屏而是要用字符引用。最简单的做法是把★字符直接复制粘贴进HTML文件只要文件保存为UTF-8编码浏览器就能正常显示。更规范的写法是用HTML实体。在HTML中每个Unicode字符都有自己的编码引用方式p实心五角星starf; 也可以写成 #9733; 或者 #x2605;/p p空心五角星star; 也可以写成 #9734; 或者 #x2606;/p其中#9733;是十进制写法#x2605;是十六进制写法starf;和star;是HTML5标准里带的命名实体。实际开发中我建议优先用十进制或十六进制写法因为命名实体在老版本浏览器或者某些严格解析环境下可能有兼容问题而数字引用几乎所有浏览器都认识。2. 在HTML里显示五角星的几种常用姿势2.1 当作普通文本直接显示五角星字符在HTML里本质就是一个文字所以字号、颜色、加粗、阴影这些文本属性都能直接作用在它身上。!DOCTYPE html html langzh-cn head meta charsetutf-8 title五角星文本样式/title style .star-lg { font-size: 48px; color: #ffb400; } .star-sm { font-size: 16px; color: #888; margin-right: 4px; } /style /head body h2span classstar-sm★/span 商品评价/h2 span classstar-lg★/span /body /html这种方案的优点是零成本不需要任何图片资源和额外类库页面上到处都用得到。缺点是它终究是个字符在部分安卓设备或老旧系统里★可能显示成方框或者样式和其他字体不一致。另外字符只能填充纯色做不了渐变描边也得依赖-webkit-text-stroke这种兼容性一般的效果。2.2 用CSS伪元素加星很多时候页面里不想手动写一堆星形字符而是希望某个元素前面自动带上星星。这时候用CSS伪元素最顺手。.item::before { content: \2605; color: #ffb400; margin-right: 6px; }需要注意一个非常容易踩的坑伪元素的content里不能用HTML实体写法。有人会写成content: starf;结果页面上直接显示出一串字符“★”。正确做法是写Unicode转义格式是反斜杠加十六进制编码比如\2605就代表★。后面这个坑我在第5章还会展开说。伪元素的优势在于干净HTML结构里完全不需要出现星形字符适合做列表前缀、标题装饰这类纯展示场景。2.3 常见星形符号大全对照表很多人搜“五角星符号大全”是想找一个冷门变体。我整理了一份常用的星形符号对照表编码都以Unicode和HTML写法给出方便直接复制。符号名称UnicodeHTML十进制写法★实心五角星U2605#9733;☆空心五角星U2606#9734;✩细线空心星U2729#10025;✪圆圈实心星U272A#10026;✫带圆空心星U272B#10027;✬双线空心星U272C#10028;✭粗轮廓空心星U272D#10029;✮黑色粗轮廓星U272E#10030;✯放射星形U272F#10031;✰细线空心星变体U2730#10032;⭐星星表情风格U2B50#11088;闪耀星星图案U1F31F#127775;这张表里✨U2728严格说不是五角星而是火花溅射图案但页面装饰里经常和星星搭配出现也值得一提。标注一下后面几个带表情风格的字符在不同平台上渲染差异很大iOS和安卓看起来完全是两个风格追求一致性的话慎用。3. 用CSS和SVG画出“真正的五角星”3.1 CSS clip-path 画五角星一份可直接复制的代码如果星星只是装饰不需要响应点击事件用CSS的clip-path画五角星是最省事的方式。原理很简单通过一个包含10个坐标点的多边形把一个正方形色块裁剪成五角星的形状。.star { width: 120px; height: 120px; background: #ffb400; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); }这10个点的顺序是从顶部尖角开始顺时针交替排列5个外尖角和5个内凹角。坐标系是百分比50% 0%就是宽度中间、高度顶端的点对应五角星顶角61% 35%是右上侧的凹陷点以此类推。改动尺寸只需要改width和height颜色改background非常方便。但clip-path的缺点是裁剪掉的区域不参与布局也不会有阴影效果。想加外发光或者阴影需要用下一节讲到的filter: drop-shadow技巧。3.2 SVG五角星尺寸、描边、渐变全可控真要在页面上做一个精细的五角星我最推荐SVG方案。SVG是矢量图形不管放大到多大都清晰而且描边、填充、渐变、透明度全部可以自定义。svg width120 height120 viewBox0 0 200 200 xmlnshttp://www.w3.org/2000/svg polygon points100,10 120.2,72.2 185.6,127.8 120.2,127.8 47.1,172.8 67.3,110.6 47.1,27.2 100,65.6 185.6,72.2 132.7,110.6 fill#ffb400 stroke#333 stroke-width4 stroke-linejoinround / /svg这里的points坐标是怎么来的呢它基于一个200x200的坐标系圆心在(100,100)。以外接圆半径90为例五个外尖角均匀分布在圆上每个间隔72度五个内凹点分布在内接圆上内接圆半径取外接圆的0.382倍。因为五角星的几何特性内接圆与外接圆半径比正好约等于0.382这个数值是怎么来的不需要死记你只要知道“内圈半径约等于外圈半径乘以0.382”就够用了。实际工作中如果你想生成不同尺寸、不同角度的五角星坐标不需要手算可以直接用JavaScript帮你生成function generateStarPoints(cx, cy, outerR, innerR, pointsNum 5) { const points []; const step Math.PI / pointsNum; for (let i 0; i pointsNum * 2; i) { const r i % 2 0 ? outerR : innerR; const angle -Math.PI / 2 i * step; const x cx r * Math.cos(angle); const y cy r * Math.sin(angle); points.push(${x.toFixed(1)},${y.toFixed(1)}); } return points.join( ); }调用generateStarPoints(100, 100, 90, 34.38)就能得到上面那串坐标。这个函数我收藏了很久做数据可视化时用到五角星形状直接调它生成坐标比自己慢慢凑点位省太多时间。3.3 真实场景一个标准的评分星级组件五角星在网页里最典型的应用就是评分组件。这里分享一个纯CSS实现星级条的方法不依赖图片和JavaScript通过宽度百分比控制显示几颗星。!DOCTYPE html html langzh-cn head meta charsetutf-8 style .rating { position: relative; display: inline-block; font-size: 32px; line-height: 1; font-family: Arial, sans-serif; letter-spacing: 4px; } .rating::before { content: ★★★★★; color: #ddd; } .rating::after { content: ★★★★★; color: #ffb400; position: absolute; left: 0; top: 0; width: 80%; overflow: hidden; white-space: nowrap; } /style /head body div classrating/div /body /html原理是两层星星叠加底层灰色代表满分空背景顶层金色盖在下面通过width: 80%配合overflow: hidden裁掉一部分视觉上就是4颗星。想要精确到半星可以把width设置成90%或者用更精细的百分比小数点。这里有个技术细节必须提醒::before和::after两层星星要保持完全对齐所以font-size、line-height、letter-spacing必须一致否则顶层和底层星星会错位。我一开始写的时候忘了设letter-spacing结果顶层星星比底层窄一点怎么调都差半个像素最后才发现是字间距惹的祸。如果要支持用户点击评分不用JavaScript也能做业内常用手法是用隐藏的radio加label。每个label里放一个星星选中哪个radio对应的label就变金色。这种模式适合做表单里的评分项提交时直接拿到用户选的分数。代码稍长但逻辑不复杂有兴趣的可以按“radio label CSS兄弟选择器”这个方向去查相关资料。4. 字体图标方案与选型建议4.1 Font Awesome 和 iconfont 的用法除了字符和SVG还有一种在真实项目中非常常见的方案字体图标。说白了就是把五角星做成一个专门的字体页面引用字体文件后通过特定的类名显示星星。最知名的是Font Awesome。引入CSS后直接这样写link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css i classfa-solid fa-star/i i classfa-regular fa-star/i i classfa-solid fa-star-half-stroke/ifa-solid是实心星fa-regular是空心星fa-star-half-stroke是半星。配合CSS改color和font-size就能控制颜色和大小做评分组件非常爽因为半星直接有现成图标。国内项目用阿里iconfont的也很多。它的流程稍繁琐一点去iconfont官网搜“五角星”把需要的图标加入购物车然后生成一个在线字体链接或者下载字体文件到本地再把对应的类名写到HTML里。好处是图标可以按需定制体积比整包引入Font Awesome小得多。4.2 选型建议字符、SVG、字体图标到底怎么选我见过不少新人在这个选择上纠结其实规则很简单。我列了一张表按场景直接选就行使用场景推荐方案原因临时写个文本、快速放个装饰符号Unicode字符★零依赖复制即用页面有固定的装饰星形不用交互CSS clip-path代码短性能好需要描边、渐变、动画的图形星SVG可控性最强所有属性都开放评分组件需要多个星星统一管理字体图标或CSS伪元素叠加方便批量修改和状态控制移动端H5对兼容性要求极高SVG或字体图标避免某些系统字体不显示字符的问题我个人在真实项目里几乎不用字符★做重要页面的评分视觉因为不同系统渲染差异太明显了。上个月做一个跨端H5页面安卓上看得好好的★到某些iOS版本上就偏大偏粗视觉重心都变了。后来统一换成SVG问题直接消失。5. 常见问题与踩坑实录5.1 五角星显示成方框、乱码怎么办这是被问得最多的一个问题。页面里五角星变成方框原因通常是字体不支持该字符或文件编码不对。先检查文件编码。HTML文件必须以UTF-8编码保存而且head里要有meta charsetutf-8。用记事本打开HTML文件另存为时右下角编码选择UTF-8。很多人写代码用的编辑器默认可能是GBK或者ANSI保存后★就变成乱码了。再检查字体。字符能不能正常渲染取决于操作系统里的字体有没有包含这个字形。Windows的宋体、微软雅黑一般都能显示★和☆但某些特殊变体比如✩、✪在部分字体下就是方框。遇到这种情况要么换一个包含该字符的字体要么直接改用SVG方案彻底绕开字体问题。5.2 伪元素里星星写了却不显示CSS伪元素content中写星形符号最常见的错误就是直接这样写/* 错误写法 */ .star::before { content: starf;; }结果页面上显示出来的是“★”这串字符。原因是content属性不接受HTML实体它只认普通字符串和CSS转义序列。正确写法是/* 正确写法 */ .star::before { content: \2605; }注意反斜杠后面是十六进制编码而且这个写法不分大小写\2605和\2605效果一样。如果你在CSS里想直接粘贴★字符本身也就是写content: ★只要文件是UTF-8编码同样能显示。两种方式我都用过个人更推荐转义写法因为不依赖文件编码出问题的概率最低。5.3 clip-path星星加阴影被裁掉用clip-path画五角星时很多人会想着加一个阴影让它立体一点于是直接写box-shadow。结果发现阴影完全看不见原因在于clip-path把元素裁剪之后超出裁剪范围的内容全部不可见包括box-shadow。解决办法不是换回图片而是用filter属性给元素加drop-shadow.star { width: 120px; height: 120px; background: #ffb400; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3)); }drop-shadow会沿着裁剪后的实际形状生成阴影就像沿着五角星边缘描了一圈半透明黑色效果比普通box-shadow还自然。同理clip-path里的星星要做渐变背景也是可行的直接在background上写渐变就好因为裁剪发生在背景之上。5.4 字符星星做渐变颜色的偏门写法如果非要让字符★带上渐变效果CSS里有一个还算能用的招背景裁剪到文字。代码如下.star-gradient { font-size: 48px; background: linear-gradient(135deg, #ffb400, #ff6a00); -webkit-background-clip: text; background-clip: text; color: transparent; }原理是把渐变色铺在文字背景上然后background-clip: text只保留文字区域的背景文字本身设为透明视觉上就是渐变色的星星。这个技巧在Chrome、Safari、Edge里都没问题但Firefox的老版本对background-clip: text支持不稳定。做评分组件我能不用就不用两个星星颜色有细微差异用户其实也察觉不到没必要为了炫技给自己挖坑。最后分享一个我自己的习惯。写前端项目时我不会为了一个五角星去引整个图标库也不会在重要页面上直接用字符★凑合而是优先考虑内联SVG。理由很简单SVG不依赖字体、不依赖额外网络请求想改颜色改描边直接在标签属性里改就行连CSS都不用动。做收藏按钮、评分组件、加载动画这套方案都很稳。如果你只是临时打个符号记住★和☆这两个字符就够了如果你要做一个真正意义上的五角星元素SVG值得你花十分钟掌握。