提问人：tntypography 提问时间：11/17/2023 更新时间：11/18/2023 访问量：14
寻求 UI 累积设置 @font-feature-settings
seeking UI to set @font-feature-settings accumulatively
问：
在此页面上，我尝试让用户选择内置于显示字体中的各种@font功能设置。
我尝试仅使用 html 和 CSS 复选框来做到这一点，但这种方法的问题是各种状态是相互排斥的。然而，我的目标是，所有可能的选项都应该是累积的，并且应该可以随机组合功能。例如，应该可以同时激活@font功能设置“ss01”和“ss10”。
我现在尝试使用 Java 脚本来做到这一点，但不幸的是，我对它完全陌生，很难取得任何进展。我发现了这一点：使用 javascript 激活的 font-feature-settings 功能，但看不出我如何让它适应我的需求。有什么建议吗？
答：
0赞
herrstrietzel
11/18/2023
#1
您可以使用 CSS 变量设置多个功能设置：
- 定义默认属性值（0 = 已停用）
:root{
--cv03: "cv02" 0;
--cv03: "cv03" 0;
--smcp: "smcp" 0
}
- 将字体特征应用于元素
CSS 变量充当每个特征的占位符。
p{
font-size: 5em;
font-feature-settings: var(--cv02), var(--cv03), var(--smcp);
}
- 通过 JS 切换功能
let inputsFeature = document.querySelectorAll('.inputFeature')
inputsFeature.forEach(input=>{
input.addEventListener('change', e=>{
let current = e.currentTarget;
let feature = current.dataset.feature;
if(current.checked){
// activate
document.documentElement.style.setProperty(`--${feature}`, `'${feature}'`)
}else{
// deactivate
document.documentElement.style.setProperty(`--${feature}`, `'${feature}' 0`)
}
})
}):root{
--cv02: "cv02" 2;
--cv03: "cv03" 0;
--smcp: "smcp" 0;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/sourcesans3/v15/nwpStKy2OAdR1K-IwhWudF-R7w0QZMrc9HY.woff2) format('woff2');
}
body {
font-family: 'Source Sans 3';
}
p{
font-size: 5em;
font-feature-settings: var(--cv02), var(--cv03), var(--smcp);
}<label><input data-feature="smcp" class="inputFeature" type="checkbox" value="1">smcp</label>
<label><input data-feature="cv02" class="inputFeature" type="checkbox" value="1" checked>cv02</label>
<label><input data-feature="cv03" class="inputFeature" type="checkbox" value="1">cv03</label>
<p>Hamburgffi 0123</p>
评论