Question

我刚刚通过@fontface将一个字体添加到我的主菜单中，其中a：hover属性改变了文本的颜色。它可以正常工作，但它保留了部分文本不变（仅在悬停时！）。我在这个具体问题上找不到什么。我试过-webkit-font-smoothing：antialiased;这是CSS

     @font-face {
        font-family:"UKIJ Diwani Tom";
        src:url("http://al-waheedhalalcanada.com/fonts/arabic-menu/UKIJDiT.eot?") format("eot"),
        url("http://al-waheedhalalcanada.com/fonts/arabic-menu/UKIJDiT.woff") format("woff"),
        url("http://al-waheedhalalcanada.com/fonts/arabic-menu/UKIJDiT.ttf") format("truetype"),
        url("http://al-waheedhalalcanada.com/fonts/arabic-menu/UKIJDiT.svg#UKIJDiwaniTom") format("svg");
        font-weight:normal;
        font-style:normal;
        }

.n ul { 
    list-style-type:none;
    margin:0 auto;
    max-width:940px;
}

.n ul li {
    height:50px;
    display:inline;
    font-size: 18px; 
    font-weight: 400; 
    margin-right: -3px;
    font-family: 'UKIJ Diwani Tom';
    padding:0 8px;
    -webkit-font-smoothing:antialiased;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',sizingMethod=crop);
  zoom: 1;
     }



.n ul li a {  
    line-height: 35px; 
    color: #106333; 
    }

.n ul li.current_page_item a {  
    color: #eef0ee; 
    text-decoration: none; 
    background:url(http://al-waheedhalalcanada.com/images/star.png) left no-repeat;
    padding: 5px 0 0 32px; 
    -webkit-font-smoothing:antialiased;
    }

.n ul li a:hover { 
    color: #eef0ee; 
    text-decoration: none; 
    -webkit-font-smoothing:antialiased;
    line-height: 35px;
}

以下是网站http://al-waheedhalalcanada.com/build

的链接

Answer 1

我在很大程度上想通了。我通过text-align将5px添加到列表项。这使文本在基线之上移动。我还在处理1个字母（关于“关于”选项卡中的A），需要向右移动约2px。填充不是答案。

基线以下的文字在悬停时不会改变颜色

1 个答案: