英文:
Is there a way to switch style in Material Symbols?
问题
当我使用Material Icons时,我可以通过替换类名来切换样式(在material-icons
和material-icons-outlined
之间)。现在我正在尝试使用Material Symbols。假设我使用星形图标并希望使图标填充。
public/index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
<span class="material-symbols-outlined">
star
</span>
对于Material Symbols,填充和轮廓之间的类名将相同,我想知道是否可以在程序中切换样式。
英文:
When I use Material Icons, I can switch the style by replacing the class name. (between material-icons
and material-icons-outlined
)
Now I am trying to use Material Symbols. Let's say I use star icon and want to make the icon filled.
public/index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
<span class="material-symbols-outlined">
star
</span>
For Material Symbols, the class name will be the same between filled and outlined and I am wondering if I can switch the style programaitically.
答案1
得分: 1
你可以使用CSS的font-variation-settings
属性来为每个元素设置符号样式。查看这里的CodePen示例:使用Google Fonts的可变字体。
我使用了在Google:Material Symbols指南中找到的示例代码,并对其进行了修改,以创建一个小演示,展示如何使用CSS的自定义属性来设置符号样式。
- 定义一个CSS的自定义属性
--variation
- 使用JavaScript修改自定义属性以保存所需的
font-variation-settings
- 在CSS中使用当前的自定义属性值来设置所需的符号样式:
unset
:将其设置为.material-symbols-outlined
的Google默认设置- 细样式:
font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48
- 填充样式:
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48
片段 给符号字体文件加载时间...
<!-- 开始片段: js hide: false console: false babel: false -->
<!-- 语言: lang-html -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style>
:root { --variation: unset } /* 将其设置为默认的Google设置 */
.icons { font-variation-settings: var(--variation) } /* 使用当前设置 */
.icons > * { font-size: 3.5rem }
</style>
<fieldset>
<legend> 图标样式 </legend>
<label for="outline">
<input id="outline" class="radio" type="radio" name="group" checked
oninput="document.documentElement.style.setProperty('--variation', 'unset');">
outlined
</label>
<label for="thin">
<input id="thin" class="radio" type="radio" name="group"
oninput="document.documentElement.style.setProperty('--variation', 'FILL 0, wght 100, GRAD 0, opsz 48');">
thin
</label>
<label for="filled">
<input id="filled" class="radio" type="radio" name="group"
oninput="document.documentElement.style.setProperty('--variation', 'FILL 1, wght 700, GRAD 0, opsz 48');">
filled
</label>
<br><br>
<div class="icons">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
</fieldset>
<!-- 结束片段 -->
英文:
You can use the CSS font-variation-settings
property to set the symbol style per element. Check the codepen example here: Variable font with Google Fonts.
I used example code found in Google: Material Symbols guide and modified it to create a little demo showcasing how to set the symbol style using a CSS custom property.
- define a CSS custom property
--variation
- modify the custom property with Javascript to hold required
font-variation-settings
- use the current custom property value in CSS to set required symbol style:
unset
: sets it to the Google default setting for.material-symbols-outlined
- thin style:
font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48
- filled style:
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48
snippet give the symbol font file time to load...
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style>
:root { --variation: unset } /* Sets it to default Google settings */
.icons { font-variation-settings: var(--variation) } /* Use current settings */
.icons > * { font-size: 3.5rem }
</style>
<fieldset>
<legend>&nbsp;Icon Style&nbsp;</legend>
<label for="outline">
<input id="outline" class="radio" type="radio" name="group" checked
oninput="document.documentElement.style.setProperty('--variation', `unset`);">
outlined
</label>
<label for="thin">
<input id="thin" class="radio" type="radio" name="group"
oninput="document.documentElement.style.setProperty('--variation', `'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48`);">
thin
</label>
<label for="filled">
<input id="filled" class="radio" type="radio" name="group"
oninput="document.documentElement.style.setProperty('--variation', `'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48`);">
filled
</label>
<br><br>
<div class="icons">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
</fieldset>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论