javascript - 在 UWP 应用程序中使用 Google Material 图标

Question

我目前正在为 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 应用程序中正确显示？

Answer 1

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:/// 方案:

1. 复制 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，但我相信它也可以正常工作。