現在網絡上有很多矢量圖標庫,但是能自定義的卻很少,不能自定義的體積就很大,造成不必要的浪費。阿里巴巴矢量圖標庫Iconfont很好的規避了這個問題,能夠自定義添加圖標到你定義的項目中,運用也很簡單。
打開阿里巴巴矢量圖標庫首頁,選擇你心儀的庫,這里可以隨便選擇,可以組合的,如下圖:
阿里巴巴矢量圖標庫Iconfont的使用方法
選擇具體圖標,添加入庫
阿里巴巴矢量圖標庫Iconfont的使用方法
右上方,點擊庫查看已經入庫的圖標,并添加至項目。也可以直接下載,點擊下載素材,選擇顏色,格式(SVG、AI、PNG),完成下載。
阿里巴巴矢量圖標庫Iconfont的使用方法
添加至項目后,可以在圖標管理=>我的項目中查看已經添加的圖標
阿里巴巴矢量圖標庫Iconfont的使用方法
阿里巴巴矢量圖標庫Iconfont的使用方法
unicode引用
unicode是字體在網頁端最原始的應用方式,特點是:
注意:新版iconfont支持多色圖標,這些多色圖標在unicode模式下將不能使用,如果有需求建議使用symbol的引用方式
unicode使用步驟如下:
第一步:拷貝項目下面生成的font-face(copy自己項目下的,不是下方的代碼,到你本地項目的樣式文件里面)
@font-face { font-family: 'iconfont'; /* project id 703892 */ src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot'); src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_703892_u8zob8nchpf.woff') format('woff'), url('//at.alicdn.com/t/font_703892_u8zob8nchpf.ttf') format('truetype'), url('//at.alicdn.com/t/font_703892_u8zob8nchpf.svg#iconfont') format('svg'); }
第二步:定義使用iconfont的樣式(你本地項目的樣式文件里面添加)
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
第三步:挑選相應圖標并獲取字體編碼,應用于頁面
<i class="iconfont"></i>
font-class引用
font-class是unicode使用方式的一種變種,主要是解決unicode書寫不直觀,語意不明確的問題。
與unicode使用方式相比,具有如下特點:
font-class使用步驟如下:
第一步:拷貝項目下面生成的fontclass代碼(引用你阿里圖標庫項目->font-class路徑到本地html的head中)
//at.alicdn.com/t/font_703892_u8zob8nchpf.css
第二步:挑選相應圖標并獲取類名,應用于頁面(這里的icon-xxx就是具體的圖片類名,去看阿里圖標庫項目->font-class)
阿里巴巴矢量圖標庫Iconfont的使用方法
<i class="iconfont icon-xxx"></i>
symbol引用
這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合,與上面兩種相比具有如下特點:
使用步驟如下:
第一步:拷貝項目下面生成的symbol代碼(引用你阿里圖標庫項目->symbol路徑到本地html的head中)
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步:加入通用css代碼(引入一次就行)
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
第三步:挑選相應圖標并獲取類名,應用于頁面
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
是不是so easy,以后在你的項目中就可以使用矢量圖標了,而且阿里提供很多種,供大家選擇使用,都是免費的哦。
近跟身邊的程序員老桿子討論需求時,驚奇的發現,他居然沒使用AI編程助手。一時間有2個想法從大腦閃過,然后心里還帶了一絲輕蔑:
不過確實有一些老桿子是用過AI編程助手,又選擇了放棄,具體啥原因,我們來聊聊。首先說說市面上常用的幾款AI編程助手。
GitHub Copilot是由GitHub和OpenAI聯合推出的AI編程助手,是我最早使用的一款編程助手。剛推出時我立馬嘗鮮,真香!當時立馬感覺解放了許多生產力。對于中文的理解以及生成的代碼質量我還是滿意的。
但是,因為價格的原因(一年需要1000多元),我一直使用的學生版和代理版。但是半年前發現GitHub對于代理版和學生版查的比較嚴,Copilot經常掉線,在加上服務器本來就在國外,有時候生成代碼的響應速度確實有些慢,漸漸地放棄了。
文心快碼(Comate),是百度推出的AI編程助手。放棄了GitHub Copilot之后,在國內尋找,當時發現可用的基本就是文心快碼了。試用了一段時間后,覺得生成代碼的速度還行,但是代碼的準確率或者被采用率,有點堪憂。
不過當時想著免費嘛,就隨便用用吧,不合適的代碼一個ESC鍵也就過了,合適的代碼一個TAB鍵就采納了,多少也能節省些工作量吧。
畢竟當時我 對于 不熟悉的領域 或者 大片段的代碼,都是讓ChatGPT生成的,我使用文心快碼的主要場景是輔助生成一些簡單或重復的代碼。
通義靈碼是阿里巴巴推出的AI編程助手,基于強大的Qianwen2大模型。通義靈碼是我最近正在使用的AI編程助手。
一次偶然的機會,我被邀參加阿里的一個AI沙龍會,當時有一個小專題是講通義靈碼的。本來用文心快碼時覺得效果一般,心里想著,通義靈碼估計也就那樣吧。
后來看那位宣講通義靈碼的哥們,激情滿滿,特別自豪,好像這款產品是他造出來的。這倒引起了我的好奇心。當時,他自豪地說他們的大模型怎么好怎么牛,通義靈碼做了多少多少的微調,做了多少多少的優化,他們對安全是怎么怎么重視。
雖說,他的話我不全信,但真的是被他當時的激情所感染(也許是出于一個產品人的同理心吧)。
當晚,我就試用了通義靈碼。安不安全的我不知道,但是,生成代碼的速度挺快。隨后,我又寫了1個小時的代碼測試,發現生成的代碼正確率和被采用率還不錯,后來就一直在用了。
通過這次選擇,更加說明一個道理自助者天助之。一個產品人一定要對自己的產品充滿自行。即使是一名程序員,在AI時代,也要將自己看做一個產品人。
ChatGPT真的是永遠的No1。要說生成代碼的準確率和自然語言的理解力,即使是中文場景,ChatGPT也是最好的。
下面是一個ChatGPT與通義靈碼針對同一需求實現代碼的小示例,朋友們可以自行感受下。
需求
我有一個Html文件,想批量替換里面的font-size的數值,放大兩倍。還要替換line-height的數值,也是放大兩倍。請你用java寫出代碼
ChatGPT實現
import java.io.*;
import java.nio.file.*;
import java.util.regex.*;
public class HtmlFontSizeLineHeightMultiplier {
public static void main(String[] args) {
String filePath="htmlFile.html";
try {
String content=new String(Files.readAllBytes(Paths.get(filePath)));
String updatedContent=updateFontSizeAndLineHeight(content);
Files.write(Paths.get("updatedHtmlFile.html"), updatedContent.getBytes());
System.out.println("File updated successfully.");
} catch (IOException e) {
e.printStackTrace();
}
}
private static String updateFontSizeAndLineHeight(String content) {
// Pattern to match font-size and line-height in CSS
Pattern fontSizePattern=Pattern.compile("font-size\\s*:\\s*(\\d+(\\.\\d+)?)(px|em|rem|%)", Pattern.CASE_INSENSITIVE);
Pattern lineHeightPattern=Pattern.compile("line-height\\s*:\\s*(\\d+(\\.\\d+)?)(px|em|rem|%)", Pattern.CASE_INSENSITIVE);
// Replace font-size values
Matcher fontSizeMatcher=fontSizePattern.matcher(content);
StringBuffer updatedContent=new StringBuffer();
while (fontSizeMatcher.find()) {
String originalValue=fontSizeMatcher.group(1);
String unit=fontSizeMatcher.group(3);
double newValue=Double.parseDouble(originalValue) * 2;
fontSizeMatcher.appendReplacement(updatedContent, "font-size: " + newValue + unit);
}
fontSizeMatcher.appendTail(updatedContent);
// Replace line-height values
Matcher lineHeightMatcher=lineHeightPattern.matcher(updatedContent.toString());
updatedContent=new StringBuffer();
while (lineHeightMatcher.find()) {
String originalValue=lineHeightMatcher.group(1);
String unit=lineHeightMatcher.group(3);
double newValue=Double.parseDouble(originalValue) * 2;
lineHeightMatcher.appendReplacement(updatedContent, "line-height: " + newValue + unit);
}
lineHeightMatcher.appendTail(updatedContent);
return updatedContent.toString();
}
}
通義靈碼實現
import java.io.*;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class HtmlFontSizeModifier {
public static void main(String[] args) {
String inputFilePath="path/to/input.html"; // 輸入文件路徑
String outputFilePath="path/to/output.html"; // 輸出文件路徑
try {
modifyFontSizesAndLineHeights(inputFilePath, outputFilePath);
} catch (IOException e) {
System.err.println("Error processing file: " + e.getMessage());
}
}
/**
* 修改HTML文件中的font-size和line-height值為原來的兩倍。
*
* @param inputPath 輸入文件路徑
* @param outputPath 輸出文件路徑
* @throws IOException 如果文件處理過程中出現錯誤
*/
public static void modifyFontSizesAndLineHeights(String inputPath, String outputPath) throws IOException {
try (BufferedReader reader=new BufferedReader(new FileReader(inputPath));
BufferedWriter writer=new BufferedWriter(new FileWriter(outputPath))) {
String line;
Pattern fontSizePattern=Pattern.compile("(font-size:\\s*([0-9]+)(px|em|rem))");
Pattern lineHeightPattern=Pattern.compile("(line-height:\\s*([0-9]+)(px|em|rem))");
while ((line=reader.readLine()) !=null) {
Matcher fontSizeMatcher=fontSizePattern.matcher(line);
Matcher lineHeightMatcher=lineHeightPattern.matcher(line);
if (fontSizeMatcher.find()) {
String fontSize=fontSizeMatcher.group(2);
String unit=fontSizeMatcher.group(3);
double newSize=Double.parseDouble(fontSize) * 2;
line=line.replaceFirst(fontSizeMatcher.group(), "font-size: " + newSize + unit);
}
if (lineHeightMatcher.find()) {
String lineHeight=lineHeightMatcher.group(2);
String unit=lineHeightMatcher.group(3);
double newLineHeight=Double.parseDouble(lineHeight) * 2;
line=line.replaceFirst(lineHeightMatcher.group(), "line-height: " + newLineHeight + unit);
}
writer.write(line);
writer.newLine();
}
}
}
}
可以看到,在對于需求的理解上ChatGPT更好,在實現正則匹配的邏輯方面ChatGPT也更完善。
對于AI編程助手的選擇,我的建議是雙管齊下:ChatGPT + 國內某個大廠的AI編程助手。
核心原因有3個:
AI編程助手的背后是大語言模型和強大的算力。在大模型的基礎上,進行了編程領域的代碼和文檔的微調訓練,使其更加使用編程場景。
具體在編程時,AI助手會根據你的代碼注釋、函數名、代碼文件等上下文信息,結合之前已經喂給它的開源代碼庫,生成與當前需求有相關性的代碼片段。
目前,仍有許多開發者由于種種原因對AI編程助手持排斥態度,我們確實也要承認AI編程助手有缺點,但是也有許多優點。
之前看過一個數據,中國約有1000萬程序員,預計有200多萬在使用AI編程助手,而且數字一直在飆升。我也從一些渠道了解到有些開發者不愿意使用AI編程助手,原因如下:
對于部分開發者和企業擔心的安全問題,我有幾點想說:
AI的定位一直都是助手,而且AI會越來越強大。AI未來一定會淘汰碼農,但是AI一定會與優秀的開發者共生。開發者應該抓住這個時代的機會,努力讓自己成為一個超級個體。
在未來的超級個體時代,知識的掌握已經不再是唯一的重要因素。隨著AI技術的發展,更多的創意、資源整合能力和產品能力將成為核心競爭力。
AI編程助手能夠處理大量的重復性工作,釋放開發者的創造力。開發者可以將更多的時間和精力投入到創新和創意上,開發出更好的產品。
經過了這一輪的經濟的洗禮,有點企業倒閉了,有的企業活下來了。即使是活下來的企業,相信也學會了更靈活的用工方式。未來,有了AI的加持,個體的能力一定會被放大。屆時,企業一定更傾向于找獨立的個體合作。
本篇主要聊了幾款AI編程助手、它的工作原理、它的優缺點、超級個體等等。我鼓勵開發者積極擁抱AI,讓自己成為一個全棧開發者和超級個體,讓AI幫助自己釋放更多的生產力和創意,讓自己充滿無限可能。
本篇完結!歡迎 關注、加微信交流、全網可搜(程序員半支煙)!!!
原文鏈接:AI編程助手那些事兒
學生就可以看懂的css基礎知識系列,pre標簽里是筆記總結,動手實際操作一下會加強理解。有疑問留言交流哦。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。