仅在OSX中发生
在我的导航中,我有一个用css和jQuery完成的子菜单:
(这仅在OSX中发生,我在大多数主流浏览器上的OSX Lion 10.8中都尝试过)
当存在谷歌地图时,该子菜单的字体没有缩小,但看起来更细,我一直在研究,可能是字体平滑或字体粗细,但我没有设法解决它。
我在jsfiddle中提取了我的代码,因为它足够大,让人感到困惑,同时提取了HTML css和javascript,我试图将代码最小化,以便于您使用。还添加了两个按钮,它们具有非常简单的功能来添加和删除Google地图,因此您可以看到问题,甚至不必刷新:
http://jsfiddle.net/SGWMx/
我几乎可以肯定问题出在gmap / css上,当我隔离它时,启动了一个空白页并开始删除东西,直到得到它为止。正如您在示例中所看到的,我大量削减了javascript,即使google map的加载也是非常基本的,即使这样也会弄乱我的字体。
function initialize(){
var coords = new google.maps.LatLng(55.378051, -3.43597299999999);
var mapOptions = {
zoom: 5,
center: coords,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
也不是字体本身,因为在我的计算机上,我实际上正在使用其他字体,只需将其设置为helvetica / arial即可兼容
仅在OSX中发生
最佳答案
好的,所以实际的问题是-webkit-transform: translateZ(0);
上的#map_canvas
属性,它是子级。不幸的是,您无法删除它;它由Google Maps使用。
这个答案可能使您对正在发生的事情有所了解:How to prevent Webkit text rendering change during CSS transition
因此,根据我的评论,唯一真正的解决方案是避免使用subpixel-aliased
。
html {
-webkit-font-smoothing: antialiased
}
关于css - OSX10.8加载谷歌 map 时的字体大小/平滑螺钉,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13608036/