javascript - 表情符号无法正确显示或根本不显示
问题描述
我制作了一个我在我教的学校使用的游戏,它有一些表情符号在我的电脑上显示得很好: 但在学校的电脑上我只得到他们的轮廓(对不起照片):
我还使用了根本没有显示的飓风表情符号️。
有没有办法确保表情符号正确显示,或者有没有办法设置回退以防表情符号无法显示?
:root {
--blue: #5519ff;
--dark-blue: rgb(1, 6, 77);
--blue-outline-shadow: #3872b5;
--blue-outline-highlight: #35a3cc;
--yellow-outline-shadow: #c4bb00;
--yellow-outline-highlight: #fff64d;
}
.emoji {
text-shadow: none;
padding-left: 1vw;
font-family: apple color emoji, segoe ui emoji, noto color emoji,
android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
segoe ui symbol;
color: none;
-webkit-text-stroke-width: 0px !important;
}
.Rtable-cell {
box-sizing: border-box;
flex-wrap: nowrap;
flex-grow: 0;
padding: 1vw;
overflow: hidden;
list-style: none;
font-size: 4vw;
place-items: center;
}
.letters {
display: flex;
flex-direction: row;
justify-content: center;
place-items: center;
text-align: center;
color: var(--dark-blue);
border-bottom: 3px solid var(--dark-blue);
font-size: 4vw !important;
/* padding-bottom: 0; */
}
.blue {
color: var(--blue-outline-highlight) !important;
font-size: 5vw !important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--dark-blue);
text-shadow: 0 1px 0px var(--yellow-outline-shadow),
1px 0 0px var(--yellow-outline-highlight),
1px 2px 1px var(--yellow-outline-shadow),
2px 1px 1px var(--yellow-outline-highlight),
2px 3px 2px var(--yellow-outline-shadow),
3px 2px 2px var(--yellow-outline-highlight),
3px 4px 2px var(--yellow-outline-shadow),
4px 3px 3px var(--yellow-outline-highlight),
4px 5px 3px var(--yellow-outline-shadow),
5px 4px 2px var(--yellow-outline-highlight),
5px 6px 2px var(--yellow-outline-shadow),
6px 5px 2px var(--yellow-outline-highlight),
6px 7px 1px var(--yellow-outline-shadow),
7px 6px 1px var(--yellow-outline-highlight),
7px 8px 0px var(--yellow-outline-shadow),
8px 7px 0px var(--yellow-outline-highlight),
-12px -12px 2px rgba(49, 206, 99, 0);
}
.place {
background-color: #fee140;
background-image: linear-gradient(to bottom, 0%, #ffff7a #fff500 100%);
border: 3px solid var(--dark-blue);
text-shadow: var(--dark-blue) 0px -2px 0;
box-shadow: inset 0px -5px 10px 1px rgba(1, 6, 77, 0.6);
font-size: 4vw;
font-weight: bolder;
color: white;
text-align: center;
height:100px;
}
.disabled {
pointer-events: none;
background-image: linear-gradient(to top, #fee140 0%, #fa709a 100%);
box-shadow: inset 0px 5px 10px 1px rgba(1, 6, 77, 0.6);
}
<div class="Rtable-cell letters blue">A <span class="emoji"></span></div>
<div class="Rtable-cell place disabled" >️</div>
解决方案
推荐阅读
- angular - 将输入值添加到Angular中的动态
- tcl - 为什么文件名没有正确呈现
- python - 如何在从 input() 获取输入时保留输入的换行符?
- reactjs - 在 React 中使用 leaflet-geotiff 的问题
- neo4j - 在 Cypher Neo4j 中查找并计算从一个节点开始不超过特定长度的所有可能路径
- c# - 使用 Mupen64Plus 非托管 C dll API 命令填充 C# 结构
- excel - 带有多个 IF 和 FOR 语句的 VBA 中的 SUMPRODUCT - 错误
- asp.net-core - .net 核心 web api 中未收到 RestRequest 正文
- sql - SQL 无法在列中插入转换后的日期时间
- http - 如何使用http post请求在flutter中进行电话身份验证?