font-face for inline svg font not working

Question

我想使用一些FontAwesome svg图标 但是font-face无效。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
  font-family: minifontawesome;
  src: url(#minifontawesomeregular) format("svg");
}

.icon {
    display: inline-block;
    font-size: inherit;
    font: normal normal normal 14px/1 minifontawesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

icon.clock:before {
  content: '\f017';
}

<i class="icon clock"></i>

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <metadata></metadata>
        <defs>
            <font id="minifontawesomeregular" horiz-adv-x="1536" >
                <font-face font-fmaily="minifontawesome" units-per-em="1792" ascent="1536" descent="-256" />
                <missing-glyph horiz-adv-x="448" />
                <glyph unicode="&#xf017;" d="M896 992v-448q0 -14 -9 -23t-23 -9h-320q-14 0 -23 9t-9 23v64q0 14 9 23t23 9h224v352q0 14 9 23t23 9h64q14 0 23 -9t9 -23zM1312 640q0 148 -73 273t-198 198t-273 73t-273 -73t-198 -198t-73 -273t73 -273t198 -198t273 -73t273 73t198 198t73 273zM1536 640 q0 -209 -103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103t385.5 -103t279.5 -279.5t103 -385.5z" />
            </font>
        </defs>
    </svg>