我目前正在为 Windows 应用商店开发一个基于 JavaScript 的 UWP 应用程序,并且我正在将我在 Angular 2 中为我的 Web 应用程序编写的代码直接转换到 UWP 应用程序中。上线之前的最后一个障碍是,当我测试时,我正在使用的 Material 图标都没有显示在 UWP 应用程序中。
引用:Live Website
html页面内的链接标签
material-icons.css 文件内容。我使用 VS 2015 将字体文件转换为 Base64。无论我是否进行此转换,我都会得到相同的最终结果
@font-face
{
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('data:application/vnd.ms-fontobject;base64,{TRUNCATED} */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('data:font/x-woff2;base64,{TRUNCATED}'),
url('data:font/x-woff;base64,{TRUNCATED}'),
url('data:application/octet-stream;base64,{TRUNCATED}');
}
.material-icons
{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
Angular 组件内的代码未正确显示
<md-icon>dialpad</md-icon>
TLDR;如何让 Google 的 Material 图标在 UWP 应用程序中正确显示?
最佳答案
How do I get Google's Material Icons to display properly in a UWP Application?
对于 UWP 应用程序,如果您想自行托管图标字体,则需要在 css 中使用 WinRT 特定的 URI 方案。 WinRT方案详情请引用URI schemes that are specific to a Windows Runtime app .
例如:如果您在应用程序中自行托管图标字体,则需要使用 ms-appx:///
方案:
- 复制 icon font到您的应用程序文件夹:
然后在
default.css
中添加以下 CSS:@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(ms-appx:///iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(ms-appx:///iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(ms-appx:///iconfont/MaterialIcons-Regular.woff) format('woff'), url(ms-appx:///iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; }
使用 Material 图标:
<i class="material-icons">dialpad</i>
我没有尝试 Angular 2 版本的 Material Icon,但我相信它也可以正常工作。
关于javascript - 在 UWP 应用程序中使用 Google Material 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44661845/