font其实是个好东西,不论是写css还是。。。,这不,牛老师想把它用在openlayers4中,用以很方便的设置图标的大小、颜色,还不失真,东拼西凑,终于算是完成了。
换个大小?
换个颜色?
先炫耀到这吧,确实很6啊。。。
1、样式引入
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
2、iconfont.css
@charset "utf-8";
@font-face {font-family: "iconfont";
src: url('./iconfont.woff?t=1502264184772') format('woff');
}
3、样式设置
function styleFunc (feature, resolution) {
var iconFont = 'iconfont';
var iconFontText = "\S"; // equates to fa-trash icon
var iconSize = 6 * map.getView().getZoom();
var col = '#00f';
var styleIcon = new ol.style.Style({
text: new ol.style.Text({
font: 'Normal ' + iconSize + 'px ' + iconFont,
text: iconFontText,
fill: new ol.style.Fill({ color: col }),
textBaseline: 'bottom'
})
});
return styleIcon;
}