CSS和雅黑字體編碼是網頁設計中常用的技術，它們可以幫助我們美化網頁的頁面，使其更加美觀和有吸引力。

其中，宋體和微軟雅黑是較為常用的字體。在CSS中，可以通過使用font-family屬性來設置字體，例如：

p {
font-family: "微軟雅黑", sans-serif;
}

我們可以在font-family后面寫上字體的名稱，若存在多個字體名稱，只需用逗號隔開即可。在上面的代碼中，我們先嘗試加載微軟雅黑字體，若加載失敗則會使用缺省的sans-serif字體。

而對于微軟雅黑字體，它的編碼則需要用到一些特殊的技術。在CSS中，字體在網頁中的呈現是通過字體文件來實現的。而微軟雅黑字體的文件名中包含了一些亂碼，因此需要使用其特殊的編碼方式來進行加載。在HTML文件中，我們可以通過以下方式來引用微軟雅黑字體文件：

<link href='//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<style type='text/css'>
@font-face {
font-family: 'Microsoft Yahei';
src: url('font/MicrosoftYaHei.eot') format('embedded-opentype'),
url('font/MicrosoftYaHei.woff') format('woff'),
url('font/MicrosoftYaHei.ttf') format('truetype'),
url('font/MicrosoftYaHei.svg#Microsoft Yahei') format('svg');
}
p {
font-family: 'Microsoft Yahei', sans-serif;
}
</style>

在這里我們定義了一個font-face，在其中定義了需要加載的字體文件的路徑。其中，eot、woff等是字體文件的擴展名，在這里就不贅述了。

之后我們在樣式中使用font-family: 'Microsoft Yahei', sans-serif;來加載微軟雅黑字體，使其在網頁中得以顯示。這樣，頁面使用微軟雅黑編碼渲染后，我們就能夠看到字體變得漂亮且清晰。