okooooooo/msime-windows
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui-html): WebView2 悬浮工具栏改用与 D2D 相同的图标字体

Browse Source 
工具栏按钮由 SVG 改为 Segoe Fluent Icons / Segoe MDL2 Assets 码位，与
D2D 工具栏逐一对应；两者都缺某个字形时换成与 D2D 相同的回退文字
（issue #232）。图标颜色因此跟随各皮肤的 .icon color，石墨皮肤的
图标色此前被 SVG 写死的描边覆盖，现在生效。设置页的工具栏与皮肤
预览同步改用图标字体和相同的回退。
This commit is contained in:
fanlusky committed 2026-09-26 23:38:37 +08:00
1 parent 7d66b2556c
commit cb75ac8383
15 files changed
+586 -550
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui-html/webview2/ftb/autumn_osmanthus.html
+53 -54
View File
@@ -112,10 +112,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -180,11 +188,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -192,7 +200,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -204,75 +212,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="white" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="white" />
<circle cx="17" cy="15" r="2" fill="white" stroke="white" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="white" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="white" stroke="white" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="white" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="white" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="white" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -399,6 +369,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/autumn_osmanthus_light.html
+53 -54
View File
@@ -111,10 +111,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -179,11 +187,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -191,7 +199,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -203,75 +211,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="#1a1a1a" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="#1a1a1a" />
<circle cx="17" cy="15" r="2" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="#1a1a1a" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="black" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="black" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -398,6 +368,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/default.html
+53 -54
View File
@@ -112,10 +112,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -171,11 +179,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -183,7 +191,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -195,75 +203,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="white" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="white" />
<circle cx="17" cy="15" r="2" fill="white" stroke="white" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="white" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="white" stroke="white" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="white" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="white" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="white" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -390,6 +360,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/default_light.html
+53 -54
View File
@@ -111,10 +111,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -170,11 +178,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -182,7 +190,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -194,75 +202,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="#1a1a1a" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="#1a1a1a" />
<circle cx="17" cy="15" r="2" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="#1a1a1a" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="black" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="black" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -389,6 +359,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/graphite.html
+53 -54
View File
@@ -112,10 +112,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -184,11 +192,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -196,7 +204,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -208,75 +216,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="white" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="white" />
<circle cx="17" cy="15" r="2" fill="white" stroke="white" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="white" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="white" stroke="white" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="white" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="white" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="white" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -403,6 +373,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/graphite_light.html
+53 -54
View File
@@ -111,10 +111,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -183,11 +191,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -195,7 +203,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -207,75 +215,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="#1a1a1a" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="#1a1a1a" />
<circle cx="17" cy="15" r="2" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="#1a1a1a" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="black" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="black" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -402,6 +372,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/wechat.html
+53 -54
View File
@@ -112,10 +112,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -179,11 +187,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -191,7 +199,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -203,75 +211,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="white" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="white" />
<circle cx="17" cy="15" r="2" fill="white" stroke="white" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="white" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="white" stroke="white" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="white" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="white" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="white" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -398,6 +368,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/wechat_light.html
+53 -54
View File
@@ -111,10 +111,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -178,11 +186,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -190,7 +198,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -202,75 +210,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="#1a1a1a" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="#1a1a1a" />
<circle cx="17" cy="15" r="2" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="#1a1a1a" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="black" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="black" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -397,6 +367,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/willow_green.html
+53 -54
View File
@@ -112,10 +112,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -180,11 +188,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -192,7 +200,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -204,75 +212,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="white" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="white" />
<circle cx="17" cy="15" r="2" fill="white" stroke="white" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="white" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="white" stroke="white" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="white" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="white" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="white" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -399,6 +369,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/ftb/willow_green_light.html
+53 -54
View File
@@ -111,10 +111,18 @@
color: inherit;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
/* 与 D2D 工具栏同一套图标字体（msimeui::ResolveIconGlyph）：Segoe Fluent Icons
优先，Segoe MDL2 Assets 兜底；两者都缺的码位由脚本换成 data-fallback 文字。 */
.icon-glyph {
font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale));
font-style: normal;
line-height: 1;
}
.icon-glyph.is-fallback {
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale));
}
.icon:hover {
@@ -179,11 +187,11 @@
<!-- 中文状态 -->
<div id="cn-en" data-toolbar-item="language">
<div class="icon" id="cn" title="中文">
<span class="lang-label">中</span>
<span class="icon-glyph" data-fallback="中">&#xE982;</span>
</div>
<!-- 日文状态 -->
<div class="icon" id="ja" style="display: none" title="日文">
<span class="lang-label">日</span>
<span class="icon-glyph" data-fallback="日">&#xE7DE;</span>
</div>
<!-- 大写锁定 -->
<div class="icon" id="cap" style="display: none" title="大写锁定">
@@ -191,7 +199,7 @@
</div>
<!-- 英文状态 -->
<div class="icon" id="en" title="英文">
<span class="lang-label">英</span>
<span class="icon-glyph" data-fallback="英">&#xE983;</span>
</div>
<!-- 英文候选输入状态 -->
<div class="icon" id="en-candidate" style="display: none" title="英文候选输入">
@@ -203,75 +211,37 @@
<!-- 2. 字符状态 -->
<!-- 半角 -->
<div class="icon" id="halfwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="半">&#xEC46;</span>
</div>
<!-- 全角 -->
<div class="icon" id="fullwidth">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9.25" stroke="#1a1a1a" stroke-width="1.5" />
</svg>
<span class="icon-glyph" data-fallback="全">&#xF138;</span>
</div>
</div>
<div id="punctuation-mode" data-toolbar-item="punctuation">
<!-- 中文标点 -->
<div class="icon" id="puncCn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="2.5" stroke="#1a1a1a" />
<circle cx="17" cy="15" r="2" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback="。">&#xF111;</span>
</div>
<!-- 英文标点 -->
<div class="icon" id="puncEn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="1.5" fill="#1a1a1a" stroke="#1a1a1a" />
<path d="M18 16L15.5 21H14L16 16H18Z" fill="#1a1a1a" />
</svg>
<span class="icon-glyph" data-fallback=",">&#xF110;</span>
</div>
</div>
<div class="icon" id="character-set" data-toolbar-item="character_set">
<svg id="character-set-simplified" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
fill="#1a1a1a" />
</svg>
<span id="character-set-traditional" style="display: none">繁</span>
<span id="character-set-simplified" class="icon-glyph" data-fallback="简">&#xE88D;</span>
<span id="character-set-traditional" style="display: none" class="icon-glyph" data-fallback="繁">&#xE88C;</span>
</div>
<div class="icon" id="emoji-panel" data-toolbar-item="emoji">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.01 10H9" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.01 10H15" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="表">&#xE76E;</span>
</div>
<div class="icon" id="screen-keyboard" data-toolbar-item="screen_keyboard" style="display: none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.25" y="4.25" width="17.5" height="12.5" rx="1.75" stroke="black" stroke-width="1.5"/>
<path d="M8 20H16M12 17V20" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.5 8H7.5M10 8H11M13.5 8H14.5M17 8H18M6.5 11H7.5M10 11H11M13.5 11H14.5M17 11H18M8 14H16"
stroke="black" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="icon-glyph" data-fallback="键">&#xE765;</span>
</div>
<div class="icon" id="settings" data-toolbar-item="settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="icon-glyph" data-fallback="设">&#xE713;</span>
</div>
</div>
</div>
@@ -398,6 +368,35 @@
window.chrome.webview.postMessage(serializeHostMessage({ type: 'openSettings' }));
});
//
// 图标字形回退：Segoe Fluent Icons 只随 Windows 11 提供，旧版 Windows 10 的 Segoe MDL2 Assets
// 也可能缺少部分输入法码位。Chromium 缺字时静默换字体，按钮会变成空白方框（issue #232），
// 所以和 D2D 工具栏一样，缺字形的按钮改用文字。U+10FFFD 不在任何字体里，拿它的渲染结果当
// “缺字形”的参照。
//
(function applyIconGlyphFallbacks() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
const render = (text) => {
context.clearRect(0, 0, 32, 32);
context.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context.textBaseline = 'top';
context.fillText(text, 4, 4);
return context.getImageData(0, 0, 32, 32).data;
};
const missing = render('\u{10FFFD}');
document.querySelectorAll('.icon-glyph[data-fallback]').forEach((node) => {
const pixels = render(node.textContent);
if (pixels.every((value, index) => value === missing[index])) {
node.textContent = node.dataset.fallback;
node.classList.add('is-fallback');
}
});
})();
// Tell the host the first frame is ready so it can stop the paint-grace show
// and apply the real visibility decision (IME active / configured / etc.).
function notifyToolbarReady() {
ui-html/webview2/settings/ime-settings/src/modules/floating-toolbar.ts
+2
View File
@@ -2,6 +2,7 @@ import { applyDropdownValue, setupDropdownMenu, setupToggleButton } from './shar
import { syncCaretStateIndicatorPreview } from './appearance';
import { updateConfig } from './config-sync';
import { syncAppearancePreviews } from './skin';
import { applyToolbarIconGlyphFallbacks } from './toolbar-icon-glyphs';
import ftbHTML from '../../../../ftb/default.html?raw';
type FloatingToolbarItem = 'fullwidth' | 'punctuation' | 'character_set' | 'emoji' | 'screen_keyboard' | 'settings';
@@ -139,6 +140,7 @@ function mountFloatingToolbarPreview(): void {
statusBar.querySelectorAll('#en, #fullwidth, #puncEn').forEach((element) => element.remove());
statusBar.querySelectorAll<HTMLElement>('[id]').forEach((element) => element.removeAttribute('id'));
applyToolbarIconGlyphFallbacks(statusBar);
host.replaceChildren(statusBar);
updatePreviewItems();
applyPreviewAppearance();
ui-html/webview2/settings/ime-settings/src/modules/skin.ts
+6 -4
View File
@@ -4,6 +4,7 @@ let styleGeneration = 0;
const styleLoads = new Map<string, Promise<void>>();
import { serializeHostMessage } from '../../../../shared/messages';
import { loadHTML } from '../utils/common-utils';
import { applyToolbarIconGlyphFallbacks } from './toolbar-icon-glyphs';
import ftbHTML from '../../../../ftb/default.html?raw';
export type SkinPreviewTheme = 'dark' | 'light';
@@ -88,6 +89,7 @@ function fillToolbar(host: HTMLElement): void {
if (!statusBar) return;
statusBar.querySelectorAll('#en, #fullwidth, #puncEn').forEach((element) => element.remove());
statusBar.querySelectorAll<HTMLElement>('[id]').forEach((element) => element.removeAttribute('id'));
applyToolbarIconGlyphFallbacks(statusBar);
host.replaceChildren(statusBar);
}
@@ -137,10 +139,10 @@ function candidatePreviewCss(skin: ExternalSkin): string {
const surface = skinColor(colors.surface);
const border = skinColor(colors.border);
const text = skinColor(colors.text);
let css = '';
const variables = [surface && `--cand-bg: ${surface}`, border && `--cand-border: ${border}`,
const number = skinColor(colors.number);
const translation = skinColor(colors.translation);
let css = '';
const variables = [surface && `--cand-bg: ${surface}`, border && `--cand-border: ${border}`,
text && `--cand-text: ${text}`].filter(Boolean).join('; ');
if (variables) {
const theme = scope ? 'light' : 'dark';
@@ -153,11 +155,11 @@ function candidatePreviewCss(skin: ExternalSkin): string {
if (surface) css += `${prefix}.container { background: ${surface}; }\n`;
if (border) css += `${prefix}.container { border-color: ${border}; }\n`;
if (text) css += `${prefix}.container { color: ${text}; }\n`;
if (colors.showSelectedBar === false) css += `${prefix}.first::before { display: none; }\n`;
return css;
if (number) css += `${prefix}.num, ${prefix}.cand-no { color: ${number}; }\n`;
// Mirrors the candidate window: an explicit translation colour is used as-is instead of the inherited text colour at opacity .62.
if (translation) css += `${prefix}.cand-translation { color: ${translation}; opacity: 1; }\n`;
if (colors.showSelectedBar === false) css += `${prefix}.first::before { display: none; }\n`;
return css;
};
let css = '';
if ((skin.decorationTopDip || 0) > 0) {
ui-html/webview2/settings/ime-settings/src/modules/toolbar-icon-glyphs.ts
+44
View File
@@ -0,0 +1,44 @@
// Preview counterpart of the glyph fallback script in ftb/*.html: the toolbar markup is copied in through DOMParser, so its inline script never runs here. Segoe Fluent Icons ships with Windows 11 only and older Segoe MDL2 Assets builds lack some IME codepoints; Chromium silently substitutes a font, so a missing glyph would preview as a blank box (issue #232). U+10FFFD is in no font, which makes its rendering the reference for "missing".
const missingGlyphCache = new Map<string, boolean>();
let renderGlyph: ((text: string) => Uint8ClampedArray) | null | undefined;
function glyphRenderer(): ((text: string) => Uint8ClampedArray) | null {
if (renderGlyph !== undefined) return renderGlyph;
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
let context: CanvasRenderingContext2D | null = null;
try {
context = canvas.getContext('2d', { willReadFrequently: true });
} catch {
context = null;
}
renderGlyph = context ? (text: string) => {
context!.clearRect(0, 0, 32, 32);
context!.font = '24px "Segoe Fluent Icons", "Segoe MDL2 Assets"';
context!.textBaseline = 'top';
context!.fillText(text, 4, 4);
return context!.getImageData(0, 0, 32, 32).data;
} : null;
return renderGlyph;
}
function isGlyphMissing(text: string): boolean {
const cached = missingGlyphCache.get(text);
if (cached !== undefined) return cached;
const render = glyphRenderer();
if (!render) return false;
const missing = render('\u{10FFFD}');
const pixels = render(text);
const result = pixels.every((value, index) => value === missing[index]);
missingGlyphCache.set(text, result);
return result;
}
export function applyToolbarIconGlyphFallbacks(root: ParentNode): void {
root.querySelectorAll<HTMLElement>('.icon-glyph[data-fallback]').forEach((node) => {
if (!isGlyphMissing(node.textContent || '')) return;
node.textContent = node.dataset.fallback || '';
node.classList.add('is-fallback');
});
}
ui-html/webview2/settings/ime-settings/src/styles/modules/floating-toolbar.css
+2 -6
View File
@@ -47,10 +47,10 @@
.ftb-preview-host .drag-handle { position: relative; width: calc(var(--ftb-handle-width) * var(--ftb-scale)); height: calc(var(--ftb-handle-height) * var(--ftb-scale)); margin-right: 0; border-radius: calc(2px * var(--ftb-scale)); background: #8e8cd8; }
.ftb-preview-host .divider { align-self: stretch; width: calc(1.2px * var(--ftb-scale)); height: auto; margin: 0 0 0 calc(4px * var(--ftb-scale)); background-color: rgba(255, 255, 255, 0.15); }
.ftb-preview-host .icon { display: flex; align-items: center; justify-content: center; width: calc(var(--ftb-icon-size) * var(--ftb-scale)); height: calc(var(--ftb-icon-size) * var(--ftb-scale)); color: #fff; border-radius: calc(6px * var(--ftb-scale)); font-family: "Segoe UI Symbol", "Microsoft YaHei", sans-serif; font-size: calc(var(--ftb-icon-size) * 0.833 * var(--ftb-scale)); }
.ftb-preview-host .icon svg { width: 100%; height: 100%; display: block; }
.ftb-preview-host .icon-glyph { font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"; font-size: calc(var(--ftb-icon-size) * 0.82 * var(--ftb-scale)); font-style: normal; line-height: 1; }
.ftb-preview-host .icon-glyph.is-fallback { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: calc(var(--ftb-icon-size) * 0.8 * var(--ftb-scale)); }
.ftb-preview-host .left-section { display: flex; align-items: center; gap: calc(4px * var(--ftb-scale)); }
.ftb-preview-host .right-section { display: flex; align-items: center; gap: calc(var(--ftb-gap) * var(--ftb-scale)); }
.ftb-preview-host svg { display: block; }
.floating-toolbar-appearance .section-header { padding: 16px 24px; gap: 16px; }
.floating-toolbar-appearance .floating-toolbar-description { margin-top: 4px; }
@@ -68,10 +68,6 @@
color: #1a1a1a;
}
.ftb-preview-host.theme-light .icon svg {
filter: invert(1);
}
html[data-theme="light"] .floating-toolbar-preview,
html[data-theme="light"] .caret-state-preview {
background: rgba(0, 0, 0, 0.03);
ui-html/webview2/settings/ime-settings/src/styles/modules/skin.css
+2
View File
@@ -136,6 +136,8 @@
.ftb-preview-host.skin-graphite.theme-dark .drag-handle { background: #8993a0; }
.ftb-preview-host.skin-graphite.theme-light .drag-handle { background: #5f6b7a; }
.ftb-preview-host.skin-graphite .icon { border-radius: calc(3px * var(--ftb-scale)); }
.ftb-preview-host.skin-graphite.theme-dark .icon { color: #d7dce2; }
.ftb-preview-host.skin-graphite.theme-light .icon { color: #374151; }
/* Preview equivalents of the standalone Willow green skin HTML files. */
.candidate.skin-willow-green.theme-dark {