Question

我目前正致力于为Windows应用商店开发基于JavaScript的UWP应用，并且我将我在Angular 2中编写的代码用于我的网络应用并将其直接转换为UWP应用。实现它之前我的最后一个障碍是，当我测试时，我正在使用的所有材料图标都没有显示在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;
}

角度组件中未正确显示的代码

<md-icon>dialpad</md-icon>

TLDR;如何让Google的物料图标在UWP应用程序中正确显示？

Answer 1

如何让Google的素材图标在UWP应用程序中正确显示？

对于UWP Application，如果要自托管图标字体，则需要在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';
}

使用材质图标：
```
<i class="material-icons">dialpad</i>
```

我没有尝试过Angular 2版本的Material Icon，但我相信它也可以正常工作。

在UWP App中使用Google Material Icons

1 个答案: